Question

我需要制作一个倾斜/旋转的表格标题，如何使倾斜内侧标题边框与表格单元格的垂直边框很好地对齐元件？

HTML：

<table>
    <tr>
        <th class="rotate"><div><span>Column1</span></div></th>
        <th class="rotate"><div><span>Column2</span></div></th>
        <th class="rotate"><div><span>Column3</span></div></th>
        <th class="rotate"><div><span>Column4</span></div></th>
   </tr>
    <tr>
        <td>RowDisplay1000</td>
        <td>Row12</td>
        <td>Row13</td>
        <td>Row14</td>
   </tr>
    <tr>
        <td>RowDisplay2000</td>
        <td>Row22</td>
        <td>Row23</td>
        <td>Row24</td>
   </tr>

</table>

CSS：

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: 7px 10px;
}

table {
    border-collapse: collapse;
    width:100%;
}
table td
/*, #rotated th*/ 
{
    border: 1px solid #ccc;
}
table tr:first-child th {
    border-top: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}

http://jsfiddle.net/Verdeairo/gwnx03vg/

Answer 1

如何移动标题，比如

th.rotate > div {
      transform: 
        /* Magic Numbers */
        translate(-18px, 51px)
        /* 45 is really 360 - 45 */
        rotate(315deg);
      width: 30px;
    }

Answer 2

检查出来：http://jsfiddle.net/gwnx03vg/2/

这就是我的所作所为：

1。删除了th

的高度

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

2。添加了transform-origin属性并更改了translate值

th.rotate > div {
  transform: 
    translate(-7px, -2px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
    transform-origin: left bottom;
    width: 30px;
}

CSS旋转/倾斜表头边框对齐

2 个答案: