CODEWITHSUNDEEP
htmlcss
user3506709
user3506709

Reputation: 63

Setting <th> cell width in css when the cells contain rotated (vertical) text

I'm trying to fix the width of the cells, which contain rotated text. Apart from the first 3 columns the remainder only need to be slightly over the height of the font of the vertical text. The remaining space can be divided equally between the first 3 columns.

I've tried setting the cell width in the CSS but it makes no difference...

There is an example here http://jsfiddle.net/pelagic/3Ggw6/1/

HTML

<div id="galley">
<table>
<thead><tr>
  <th colspan="3" class="vertical-label">&nbsp;</th>
  <th colspan="11"><div>Regions</div></th>
  <th width="5%" class="vertical-label">&nbsp;</th>
</tr>
  <tr>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">One</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">One</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">One</div>
    </div></th>
    <th width="10" class="vertical-label"><div class="vheader">
      <div align="left">Antarctic</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Arctic</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Baltic&nbsp;Sea</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Black&nbsp;Sea</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Cas&#8226;pian&nbsp;Sea</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Indo&nbsp;Pacific</div>
    </div></th>
    <th width="30" class="vertical-label"><div class="vheader">
      <div align="left">Mediterranean&nbsp;Sea</div>
    </div></th>
    <th width="5%" height="150" class="vertical-label"><div class="vheader">
      <div align="left">North&nbsp;Atlantic</div>
    </div></th>
   <th width="5%" height="150" class="vertical-label"><div class="vheader">
      <div align="left">North&nbsp;Pacific</div>
    </div></th>
    <th width="5%" height="150" class="vertical-label"><div class="vheader">
      <div align="left">South&nbsp;Atlantic</div>
    </div></th>
    <th width="auto" height="150" class="vertical-label"><div class="vheader">
      <div align="left">South&nbsp;Pacific</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">References</div>
    </div></th>
  </tr>
</thead>
<tfoot></tfoot>
<tbody><tr><td>Otariidae</td>
<td>Arctocephalus  pusillus</td>
<td>Cape or Australian fur  seal</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;    </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr class="alt"><td>&nbsp;</td><td>Arctophoca gazella</td>
<td>Antarctic fur seal</td>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>A. tropicalis</td>
<td>Subantarctic fur seal</td>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</tbody>
</table>
</div>

CSS

#galley {
    width: 738px;
height: auto;
border: 1px #CCCCCC;
float:none
}

#galley table, th, td {
border: 1px solid black;
border-collapse:collapse;
}

#galley table {
table-layout: fixed;
width: 738px;
}

#galley th.vertical-label{      
-webkit-transform: rotate(270deg) translateX(100%) translateY(33%);
-moz-transform: rotate(270deg) translateX(100%) translateY(33%);
-o-transform: rotate(270deg) translateX(100%) translateY(33%);
 -webkit-transform-origin: 100% 100%;
 -moz-transform-origin: 100% 100%;
 -o-transform-origin: 100% 100%;
 writing-mode: lr-tb;
 }

#galley th, th.vertical-label{
font-family: "myriad Pro";
font-decoration: bold;

}

#galley .vheader{
margin-left: 5px;
}

Upvotes: 0

Views: 377

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105893

to allow your cells to grow from their content, exept the ones that are rotated , you need to make sure that the rotated text do not expand your cells.

They can be set in absolute or virtually reduced with a negative margin.

With negative margin , they will need no space. But you need the cell to grow vertically, for this , use a pseudo element with vertical padding in %.

DEMO to play with

The method :

This will draw a square that will need no horizontal space until it reaches 999px X 2 of width , height will grow according to its width:

 td div.text-rotated {
margin-:0 -999px;
}
td div.text-rotated:before {
padding-top:100%;
content:'';
display:inline-block;
}

other possibilitie with a naive menu

Upvotes: 1

Related Questions