Question

我正在使用以下代码旋转表以适合所有大标题名称的表。

<html><body>

<style type="text/css">
.tftable {font-size:12px;color:#333333;width:1%;border-width: 1px;border-color: #ebab3a;border-collapse: collapse;}
.tftable th {font-size:12px;border-width:1px;padding: 1px;border-style: solid;border-color: #ebab3a;text-align:left;}
.tftable tr { line-height: 14px;}
.tftable td {font-size:12px;border-width: 1px;padding: px;border-style: solid;border-color: #ebab3a;height: 14px;}
.tftable tr:hover {background-color:#ffffff;border:none;}
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(270deg);
  width: 30px;
}
th.rotate > div  {
  border-bottom: 0px solid #ccc;
  padding: 0px 0px;
}
</style>



<table class="tftable" border="1">
<tr><th class="rotate"><div>Metabolite</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th><th class="rotate"><div>Experiment</div></th></tr>
<tr><td bgcolor="green">Metabolilte1</td><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td><td> 10</td><td> 11</td><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
<tr><td>Metabolilte2</td><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td><td> 10</td><td> 11</td><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
<tr><td>Metabolilte3</td><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td><td> 10</td><td> 11</td><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
<tr><td>Metabolilte4</td><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td><td> 10</td><td> 11</td><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
</table>
</body></html>

为什么第二列标题为空白，最后一列标题出现在表格之外？

Answer 1

“translate”的第一个参数应为0。

Answer 2

我们有轮换代码：

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

这些不是 Magic Numbers 。 translate(x,y)方法在x轴上移动元素x像素，在y轴上移动y像素。在你的代码中它向右25px，向下51px。将x的值更改为0可避免向右转换不需要的内容，因此请将translate(25px, 51px)更改为translate(0px, 51px)（请参阅http://plnkr.co/edit/eZS9xVtFGkxgraibV55z）。

现在我们可以在y轴和表头元素的大小上进行翻译。让我们在y到20px和th元素的高度设置为80px（见http://plnkr.co/edit/kZkI8GDiWlwU1t28lOWO）。

在表格中旋转标题时格式化错误

2 个答案: