Question

Hi I have a number of tables nested inside one table, it works well in all browsers, however when I have rotating text the width proporty does not work in Safari and FireFox, it works well in IE9, also I noticed if I have more than one word in a its width increases!!

Here is the style:

.V-text
{
    padding: 0px;
    color: #333; /*  border: 0px solid red;*/
    /*writing-mode: tb-rl;*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    white-space: nowrap;
    display: inline-table;
    font-weight: normal; /* vertical-align: bottom; bottom: 0; text-align: center;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}

Here is part of the table:

         <table width="920px" border="0" >
            <tr>
                <td>
                      <table width="50px">
                        <tr style="height: 105px" valign="middle">
                            <td align="center" class="t-border" width="15px">
                                <div class="V-text">
                                    text</div>
                            </td>
                            <td align="center" class="t-noborder" width="15px">
                                <div class="V-text">
                                    text</div>
                            </td>
                        </tr>
                    </table>

                            </td>
                        </tr>
                    </table>

Other tables that does not have rotation worked very well.
I tried style=”table-layout:fixed” did not work, I would appreciate your suggestions.

Answer 1

After spending two days, I found the best solution is to use image for the vertical section of the table, rather than trying to fix it for different browsers.