views:

338

answers:

4

Is it possible to fix the height of a row (tr) on a table?

The problem appears when I shrink the window of the browser, some rows start playing arround, and I can not fix the height of the row.

I tried several ways: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

I am using IE7

Thanks in advance.

Style

.tableContainer
{
 color:#0076BF;
 margin: -10px 0px -10px 0px;
 border-spacing: 10px;
 empty-cells:show;
 width:90%;
 text-align:left;


 } 

 .tableContainer tr td{
  white-space:nowrap;
  text-align:left;
 }

HTML code.

<table class="tableContainer" cellspacing="10px">
 <tr style="height:15px;">
    <td>NHS Number</td>
    <td>&#160;</td>
    <td>Date of Visit</td>
    <td>&#160;</td>
    <td colspan="3">Care Time Started</td>
    <td>&#160;</td>
    <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td>
    <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>                        care starts</td>
 </tr>
 <tr >
     <td width="90" class="tableContainerRow2">&#160;</td>
     <td >&#160;</td>
     <td width="80" class="tableContainerRow2">&#160;</td>
            <td >&#160;</td>
     <td width="40" class="tableContainerRow2">&#160;</td>
            <td  width="5">:</td>
     <td width="40" class="tableContainerRow2">&#160;</td>        
            <td >&#160;</td>
  </tr>
</table>
+1  A: 

Try putting the height into one of the cells, like this:

<table class="tableContainer" cellspacing="10px">
 <tr>
  <td style="height:15px;">NHS Number</td>
  <td>&#160;</td>

Note however, that you won't be able to make the cell smaller than the content requires it to be. In that case you would have to make the text smaller first.

poke
Thanks for the comment, I tried that and does not work.
Cesar Lopez
+1  A: 

Your table width is 90% which is relative to it's container.

If you squeeze the page, you are probably squeezing the table width as well. The width of the cells reduce too and the browser compensate by increasing the height.

To have the height untouched, you have to make sure the widths of the cells can hold the intented content. Fixing the table width is probably something you want to try. Or perhaps play around with the min-width of the table.

o.k.w
Thanks for the comment I tried that and did not work.
Cesar Lopez
+1  A: 

That is because the words are wrapping and are going on new lines hence stretching the TR. This should fix your problem:

overflow:hidden;

Put that in the TR styles Although it should work, why not just let it stretch o0

PS. i aint tested it so dont hate XD

Ozzy
Thanks for the comment, I tried that and did not work :-(.
Cesar Lopez
Not hating, but there is a list of styles supported by the TD element in IE at http://msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx. `overflow` isn't one of them.
Andy E
+1  A: 

Tables are iffy (at least, in IE) when it comes to fixing heights and not wrapping text. I think you'll find that the only solution is to put the text inside a div element, like so:

<table>
  <tr>
    <td style="height:20px;">
      <div style="width:100%;height:100%;overflow:hidden;">
        This is a long line of text designed not to wrap 
        when the container becomes too small.</div>
    </td>
  </tr>
</table>

This way, the div's height is that of the containing cell and the text cannot grow the div, keeping the cell/row the same height no matter what the window size is.

EDIT
Since you mentioned it was messy, the cleanest way you could probably put it is in a child-of class:

td.container > div { width: 100%; height: 100%; overflow:hidden; }
td.container { height: 20px; }

<table>
  <tr>
    <td class="container">
      <div>This is a long line of text designed not to wrap 
        when the container becomes too small.</div>
    </td>
  </tr>
</table>   

Done like this, you're only wrapping tags with no attributes around the content, so it's much neater.

Andy E
Thanks for the advise, It seems to work, but it looks a bit messy though.
Cesar Lopez
Happy to help :-) Unfortunately, messy code is usually the case in hacks and workarounds.
Andy E