how we can make text direction in table headers make from bottom to top?

Question

how we can make text direction in table headers make from bottom to top? The following code works for Chrome. But it doesn't work for Firefox.

Is it possible to have universal code for all browsers?

.vert_dir {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  float: right;
  writing-mode: tb-rl;
}

<p>&nbsp;</p>
<table border="1" style="position:relative;">
  <tbody>
    <tr>
      <td><span class="vert_dir">Column 1</span></td>
      <td>Column 2</td>
      <td class="vert_dir">Column 3</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

score 1 · Answer 1 · answered Jun 11 '17 at 14:58

1

Please have a look at: How to display vertical text in table headers with auto height / without text overflow?

Use -90 degrees instead of 90 degrees.

answered Jun 11 '17 at 14:58

RaphaMex

2,781
1
14
30

Thanks. But. 1.The main reason we want to use text vertical direction is - to reduce the width of the column. In all the examples of your link the width is equal to the height. 2. All the examples work well at http://jsfiddle.net, but do not work as they should at https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform And please, check it with different texts with different lengths. From all these examples only my given example works OK, but only in Chrome. – Avrob Jun 11 '17 at 19:10
Have you tried `writing-mode: vertical-lr;` instead of `writing-mode: tb-lr;`? This is recommendation for firefox – RaphaMex Jun 12 '17 at 03:16
Checked writing-mode: vertical-lr; There is no difference. – Avrob Jun 12 '17 at 12:10
I voted up your question, seems you're right this issue has not been completely solved on stackoverflow already. Tried few css myself and could not make it work straight away. – RaphaMex Jun 12 '17 at 14:37
My given example works OK also in Internet Explorer 11 and Edge browsers. So the problem is - FireFox. – Avrob Jun 13 '17 at 19:24
For Firefox I've added as much " "s in the second raw cells as needed for achieving column desired width. It works ))). – Avrob Jun 14 '17 at 09:39

Avrob · Answer 2 · 2018-03-07T18:28:13.993

So, we can summarize the discussion above.

To make text direction in table headers from bottom to top we use .vert_dir class.

To have the necessary width for columns we have to add "nbsp"s in corresponding cells of above or below row.

If the row is the only one in the table we can add an empty row with class=trhidden for filling needed count of nbsp in corresponding cells.

.vert_dir {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    /*text-align:center;*/
    -ms-writing-mode:tb-rl;
    writing-mode:tb-rl;
}
.trhidden
{
    visibility:collapse;
}

<table border="1">
  <tbody>
    <tr>
      <td><span class="vert_dir">1. Column 1 - the good version</span></td>
      <td><p><span class="vert_dir">2. Column 2</span></p></td>
      <td>3. Column 3</td>
      <td class="vert_dir"><p>4. test Column 4</p></td>
      <td><p class="vert_dir">5. this is test Column 5</p></td>
      <td><span class="vert_dir">6. Column 6</span></td>
    </tr>
    <tr class=trhidden>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Columns 1 and 6 are the same, except that the cell below cell 6 has no &nbsp s.

In this example columns 1 and 2 with the cells below filled with "&nbsp"-s work for all browsers.

how we can make text direction in table headers make from bottom to top?

2 Answers2