Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fix height of TR?

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 around, 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

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> 
like image 870
Amra Avatar asked Jan 19 '10 10:01

Amra


People also ask

How do you fix tr height?

The height of rows 'tr' in a table can be fixed very easily. This can be done by adding the height attribute in the tr tag. If the height is not specified, the height of the row changes according to the content. The height can be specified either in pixels, or percentage.

How do I fix td height in HTML?

To set the cell width and height, use the CSS style. The height and width attribute of the <td> cell isn't supported in HTML5. Use the CSS property width and height to set the width and height of the cell respectively.

How do you set the height of a row in a table?

To set the row height to a specific measurement, click a cell in the row that you want to resize. On the Layout tab, in the Cell Size group, click in the Table Row Height box, and then specify the height you want. To use the ruler, select a cell in the table, and then drag the markers on the ruler.


2 Answers

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:

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>

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.

like image 73
Andy E Avatar answered Sep 16 '22 11:09

Andy E


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.

like image 28
poke Avatar answered Sep 17 '22 11:09

poke