垂直表中文本的位置凌乱，我该如何解决？

时间：2018-09-18 10:50:10

标签： html css css3

最初我想创建一个表格标题，如下图所示

enter image description here

最近几天我没有找到解决此问题的方法。 我尝试使用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;">一样。

希望您能帮助我。谢谢。 ：）

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

我建议您查看writing-mode中的垂直文本。

  

writeing-mode CSS属性定义文本行是水平放置还是垂直放置，以及块前进的方向。

     

MDN

由于您试图将大量填充到700px中，因此仍然需要处理字体大小，但这应该使其更易于管理。

.table-print tr td {
  border: 1px solid black;
  font-size: 14px;
}

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

.verticalTable {
  text-align: center;
}

td b,
.verticalTable p {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

table {
  table-layout: fixed;
  width: 100%;
  text-align: center;
}
<div style="width: 700px;">
  <table class="arial-font table-print">
    <thead>
      <tr>
        <td rowspan="2"><b>Number</b></td>
        <td rowspan="2"><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>

答案 2 :(得分：0)

您可以赶上我的小提琴jsfiddle.net/alyeah/ny1h546d /

相关问题
最新问题