如何在表格列标题处垂直旋转文本

Question

如何在表格列标题处垂直旋转文本

3

我在我的网页上使用了这个数据表格。这是我放置代码的fiddle链接。我想要，第一个数字和第二个数字列应该垂直旋转。我已经做到了。但是问题是旋转后，列标题和列不能保持在一起。此外，我希望垂直旋转文本的列尽可能地更窄。但是，即使我在该列的标题处设置了20像素的宽度，我也无法做到。另一件事是，在IE8中，旋转文本的div看起来不同（填充/边距问题）。根据我的问题，我只应该写关于我放置旋转文本的问题/失败。但是，我在这里写了多个问题。那是因为，在我放置旋转文本到列标题之后，所有的问题都出现了（我给出的插件js也有点责任，因为它阻止了正确修改列的宽度）。我相信，如果我能以适当的方式放置垂直旋转的文本（考虑到IE8），并正确修改表格的宽度，就不会再存在问题了。那么，我如何正确地将垂直旋转的文本放置在列标题中？

一些代码：

<table id="example" class="dataTable display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th class="rank">Rank</th>
      <th class="wider">User Inserted Title Name</th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>System Architect and Analyser</td>
      <td>1</td>
      <td>4</td>
      <td>6</td>
      <td>20</td>
      <td>5</td>
      <td>1</td>
      <td>4</td>
      <td>6</td>
      <td>20</td>
      <td>5</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Accountant</td>
      <td>4</td>
      <td>13</td>
      <td>7</td>
      <td>11</td>
      <td>8</td>
      <td>1</td>
      <td>4</td>
      <td>6</td>
      <td>20</td>
      <td>5</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Junior Technical Author</td>
      <td>5</td>
      <td>26</td>
      <td>9</td>
      <td>3</td>
      <td>19</td>
      <td>1</td>
      <td>4</td>
      <td>6</td>
      <td>20</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

- user1896653

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- The_DemoCorgin · Accepted Answer

仅旋转 div，而不是表头。每个 th 行应该像这样: <th><div class="rotate">第一个数字第二个数字</div></th>

并且调整旋转的 CSS 代码为：

.rotate {
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
      -ms-transform: rotate(-90.0deg);  /* IE9+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Safari 3.1+, Chrome */
          transform: rotate(-90.0deg);  /* Standard */
}

这里是一个更新的代码片段。