如何在表列标题上垂直旋转文本 [英] how to rotate text vertically at table column header

问题描述

我在我的网页上使用了此数据表。这是我放置代码的小提示链接。我想，第一个第二个数字列应该垂直旋转。我已经做了。但是，问题是之后，列标题和列不能保持在一起 除此之外，我想垂直旋转文本的列将尽可能更薄。 另一件事是，在IE8，旋转文本的div看起来不同（padding / margin问题），但是我不能让它，虽然我设置20px宽度在该列的头。根据我的问题，我只应该写我的问题/失败的旋转文本。但是，我在这里写了多个问题。这是因为，所有我的问题都来自旋转文本在列标题（我给定的插件的js有点负责，因为它阻止正确修改列的宽度）。我相信，如果我可以把正确的方式（关于IE8的垂直旋转文本）和修改表的宽度正确，没有问题将存在了。

I've used this data table at my webpage. This is the fiddle link where I put the code. I want, First Number Second Number column should be vertically rotated. I've made it already. But, problem is after making it, column header and column can't stay along together. Besides this, I want vertical rotated text's column will be as much as possible thinner. But, I can't make it though I set 20px width at that column's header. Another thing is that, at IE8, rotated text's div looks different(padding/margin issue). According to my question, I should only write about my problem/failure of putting rotating text. But, I've written multiple problems here. That's because, all my problems come after putting rotating text at column header(my given plugin's js is a little bit responsible too as it prevent modifying columns's width properly). I believe, if I can put the vertical rotated text in proper way(concerning about IE8 too) and modify table's width properly, no problem will be existing anymore. So, how can I put the vertical rotate text properly at the column's header?

有些代码：

<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>

推荐答案

只旋转div而不是表头。每个 th 行应该看起来像：< th> class =rotate> Fisrt Number Second Number< / div>< / th>

Rotate just the div not the table header.Each th line should look like: <th ><div class="rotate">Fisrt Number Second Number</div></th>

.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 */
}

这里是更新的小提琴

这篇关于如何在表列标题上垂直旋转文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！