user1896653 user1896653 - 25 days ago 11
CSS Question

how to rotate text vertically at table column header

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?

Some Code:



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




Answer

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

And adjust the rotate css code to:

.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 is an updated fiddle

Comments