我用过这个数据表 http://www.datatables.net/在我的网页上。这是fiddle http://jsfiddle.net/fxju7/2/链接我放置代码的地方。我想要，第一个数字第二个数字列应该垂直旋转。我已经做到了。但是，问题是制作完成后，列标题和列不能保持在一起。 除此之外，我希望垂直旋转文本的列尽可能更薄。但是，尽管我在该列的标题处设置了 20px 宽度，但我无法做到这一点。另一件事是，在 IE8 中，旋转文本的 div 看起来不同（填充/边距问题）。根据我的问题，我应该只写关于放置旋转文本的问题/失败。但是，我在这里写了多个问题。那是因为，我所有的问题都是在将旋转文本放在列标题后出现的（我给定的插件的js也有一点责任，因为它阻止正确修改列的宽度）。我相信，如果我能以正确的方式放置垂直旋转的文本（也涉及IE8）并正确修改表格的宽度，那么就不再存在问题. So, 如何将垂直旋转文本正确放置在列标题处?
一些代码：
<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 而不是表头。Eachth线路应如下所示：<th ><div class="rotate">Fisrt Number Second Number</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 */
}
Here http://jsfiddle.net/tsHunter/fxju7/5/是更新的小提琴
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
