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
.
Comments
Post a Comment