html - 垂直旋转后表td内容出td

Question

我试图用 height 样式来解决这个问题，但它不起作用。基本上我使用的是 table-layout: fixed。

CSS

.test-table.table {
  table-layout: fixed;
}

.test-table.table>tbody>tr>td {
  padding: 0;
  width: 10px;
}

.test-table.table>tbody>tr>td:first-child {
  width: 30px;
  padding: 5px;
}

.test-table.table>tbody>tr:last-child>td {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  white-space: nowrap;
}

HTML

<div>
  <table class="table table-bordered test-table">
    <tbody>
      <tr>
        <td></td>
        <td>h</td>
        <td></td>
        <td>09:15 AM</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

你只要检查this

<th class="rotate"><div><span>Column header 1</span></div></th>

你试试这个样子

th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}