4
Answers

Align Text in Table header after rotating it 90 or 270 degree

Rahul Sharma

Rahul Sharma
3y
2.1k
1

I had rotated the header text in a table but now the problem is, I am not able to center it.

My Css:

<style>
.myClass {height: 350px; 
column-width: 20px;
text-align: left;
    white-space:nowrap; 
    g-origin:50% 50%;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    } 
</style>

and My Html Table

<table border="1">
    <tr>
        <th class="myClass">Secondlongheadear
        </th>
        
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Second long headear
        </th>
        <th class="myClass">Test Secondlongheadear
        </th>
        <th class="myClass"> Testing Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Test of Second long headear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        
        
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Secondlongheadear
        </th>
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
    </table>

 

Answers (4)
Next Recommended Forum