html - 垂直表格中的文字位置很乱，如何解决？

Question

最初我想创建一个如下图所示的表头

最近几天我没有找到解决这个问题的方法。我试过vertical-aligment , text-align , table-layout:fixed解决这个问题。但是还是不能像上图中我想要的表格那样动态。

.table-print tr td {
    border: 1px solid black;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.table-print {
    border-collapse: collapse;
    width: 100%;
}
.verticalTable {
    text-align:center;
    white-space:nowrap;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}
.verticalTable p {
    margin:0 -100% ;
    display:inline-block;
}
.verticalTable p:before {
    content:'';
    width:0;
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
    vertical-align:middle;
}
table {
    text-align:center;
    table-layout : fixed;
    width:150px
}

<div style="width: 700px;">
    <table class="arial-font table-print">
        <thead>
            <tr>
                <td rowspan="2"><b>Number</b></td>
                <td rowspan="2" width="100px"><b>Regencies</b></td>
                <td rowspan="2"><b>Facilities</b></td>
                <td rowspan="2"><b>Target Number of Facilities Checked</b></td>
                <td colspan="2">Check up result</td>
                <td colspan="8">Description of Findings</td>
                <td colspan="6">Follow-up</td>
            </tr>
            <tr>
                <td class="verticalTable"><p>Good</p></td>
                <td class="verticalTable"><p>Findings</p></td>
                <td class="verticalTable"><p>Licensing</p></td>
                <td class="verticalTable"><p>CPOB/CPKB/CPPB</p></td>
                <td class="verticalTable"><p>Unlisted Products</p></td>
                <td class="verticalTable"><p>TMS Mutu/Label</p></td>
                <td class="verticalTable"><p>Materials / Products are prohibited</p></td>
                <td class="verticalTable"><p>Administration</p></td>
                <td class="verticalTable"><p>Hygiene & Sanitation</p></td>
                <td class="verticalTable"><p>Other</p></td>
                <td class="verticalTable"><p>Coaching</p></td>
                <td class="verticalTable"><p>Warning</p></td>
                <td class="verticalTable"><p>Hard Warning</p></td>
                <td class="verticalTable"><p>Temporary Dismissal of Activities</p></td>
                <td class="verticalTable"><p>Termination of Activities</p></td>
                <td class="verticalTable"><p>ProJustitia</p></td>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

我希望表格与 <div style="width: 700px;"> 一样宽.

我希望你能帮助我。谢谢。 :)

Answer 1

所以我去掉了空白不换行，改变了文本的方向，将表格的宽度更改为 700px 并删除了修复表格布局:

.table-print tr td {
  border: 1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.table-print {
  border-collapse: collapse;
  width: 100%;
}

.verticalTable {
  text-align: center;
  /*white-space:nowrap;*/
  transform: rotate(-90deg);
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.verticalTable p {
  margin: 0 -100%;
  display: inline-block;
}

.verticalTable p:before {
  content: '';
  width: 0;
  padding-top: 110%;
  /* takes width as reference, + 10% for faking some extra padding */
  display: inline-block;
  vertical-align: middle;
}

table {
  text-align: center;
  /*table-layout : fixed;*/
  width: 700px;
}

<div style="width: 700px;">
  <table class="arial-font table-print">
    <thead>
      <tr>
        <td rowspan="2"><b>Number</b></td>
        <td rowspan="2" width="100px"><b>Regencies</b></td>
        <td rowspan="2"><b>Facilities</b></td>
        <td rowspan="2"><b>Target Number of Facilities Checked</b></td>
        <td colspan="2">Check up result</td>
        <td colspan="8">Description of Findings</td>
        <td colspan="6">Follow-up</td>
      </tr>
      <tr>
        <td class="verticalTable">
          <p>Good</p>
        </td>
        <td class="verticalTable">
          <p>Findings</p>
        </td>
        <td class="verticalTable">
          <p>Licensing</p>
        </td>
        <td class="verticalTable">
          <p>CPOB/CPKB/CPPB</p>
        </td>
        <td class="verticalTable">
          <p>Unlisted Products</p>
        </td>
        <td class="verticalTable">
          <p>TMS Mutu/Label</p>
        </td>
        <td class="verticalTable">
          <p>Materials / Products are prohibited</p>
        </td>
        <td class="verticalTable">
          <p>Administration</p>
        </td>
        <td class="verticalTable">
          <p>Hygiene & Sanitation</p>
        </td>
        <td class="verticalTable">
          <p>Other</p>
        </td>
        <td class="verticalTable">
          <p>Coaching</p>
        </td>
        <td class="verticalTable">
          <p>Warning</p>
        </td>
        <td class="verticalTable">
          <p>Hard Warning</p>
        </td>
        <td class="verticalTable">
          <p>Temporary Dismissal of Activities</p>
        </td>
        <td class="verticalTable">
          <p>Termination of Activities</p>
        </td>
        <td class="verticalTable">
          <p>ProJustitia</p>
        </td>
      </tr>
    </thead>
    <tbody>

    </tbody>

  </table>
</div>