html - How can I display vertical text in a table with fixed height? -


i want display vertical text on header of table; header has fixed height. , want hidden overflow too.

my html is:

<table border='1px solid black'>  <thead>   <tr style='font-weight:bold; color:blue'>    <td width="60"> data </td>    <td width="35"> voto </td>    <td width="50"> tipo </td>    <td width="10"> </td>    <th style="color:red; height:200px; vertical-align:bottom" width="20">     <span>       <div style="width:100%;height:100%;overflow:hidden;"> hi </div>     </span>    </th>    <td> annotazioni </td>   </tr>  </thead> </table> 

and css:

table     {         border-collapse:collapse;         table-layout: fixed;         width: 400px;     }        th span {        writing-mode: tb-rl;       filter: flipv fliph;       -webkit-transform:rotate(-90deg);        white-space:nowrap;        display:block;     } 

i have problem: appears couple of letters of vertical text. why?

here can see better: example

thank help!

this seems strange layout table, , i'm not sure of use case. therefore, i'm not sure how flexible needs be, adding th span fixes example:

width: 200px; text-align: center; margin-left: -90px; 

also, add vertical-align: middle; containing th.

http://jsfiddle.net/m7nfu/22/


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -

php - Accessing static methods using newly created $obj or using class Name -