How to fix height of TR

Question

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>

This question is related to html html-table row

User · Answer

Setting the td height to less than the natural height of its content  Since table cells want to be at least big enough to encase their content  if the content has no apparent height  the cells can be arbitrarily resized   By resizing the cells  we can control the row height   One way to do this  is to set the content with an absolute position within the relative cell  and set the height of the cell  and the left and top of the content    x000D   x000D  table   x000D    width  100   x000D    x000D  td   x000D    border  1px solid  999  x000D    x000D   set-height td   x000D    position  relative  x000D    overflow  hidden  x000D    height  3em  x000D    x000D   set-height p   x000D    position  absolute  x000D    margin  0  x000D    top  0  x000D    x000D     table layout fixed    x000D   layout-fixed   x000D    table-layout  fixed  x000D    x000D     td width    x000D   td-width td first-child   x000D    width  33   x000D    x000D   lt table gt  lt tbody gt  x000D     lt tr class  set-height  gt  x000D       lt td gt  lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  lt  td gt  x000D       lt td gt Foo lt  td gt  lt  tr gt  lt tr gt  lt td gt Bar lt  td gt  lt td gt Baz lt  td gt  lt  tr gt  lt tr gt  lt td gt Qux lt  td gt  x000D       lt td gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  td gt  x000D     lt  tr gt  x000D   lt  tbody gt  lt  table gt  x000D   lt h3 gt With  lt code gt table-layout  fixed lt  code gt  applied  lt  h3 gt  x000D   lt table class  layout-fixed  gt  lt tbody gt  x000D     lt tr class  set-height  gt  x000D       lt td gt  lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  lt  td gt  x000D       lt td gt Foo lt  td gt  lt  tr gt  lt tr gt  lt td gt Bar lt  td gt  lt td gt Baz lt  td gt  lt  tr gt  lt tr gt  lt td gt Qux lt  td gt  x000D       lt td gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  td gt  x000D     lt  tr gt  x000D   lt  tbody gt  lt  table gt  x000D   lt h3 gt With  lt code gt  amp lt td amp gt  width lt  code gt  applied  lt  h3 gt  x000D   lt table class  td-width  gt  lt tbody gt  x000D     lt tr class  set-height  gt  x000D       lt td gt  lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  lt  td gt  x000D       lt td gt Foo lt  td gt  lt  tr gt  lt tr gt  lt td gt Bar lt  td gt  lt td gt Baz lt  td gt  lt  tr gt  lt tr gt  lt td gt Qux lt  td gt  x000D       lt td gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  td gt  x000D     lt  tr gt  x000D   lt  tbody gt  lt  table gt  x000D   x000D   x000D    The table-layout property  The second table in the snippet above has table-layout  fixed applied  which causes cells to be given equal width  regardless of their content  within the parent   According to caniuse com  there are no significant compatibility issues regarding the use of table-layout as of Sept 12  2019   Or simply apply width to specific cells as in the third table   These methods allow the cell containing the effectively sizeless content created by applying position  absolute to be given some arbitrary girth   Much more simply     I really should have thought of this from the start  we can manipulate block level table cell content in all the usual ways  and without completely destroying the content s natural size with position  absolute  we can leave the table to figure out what the width should be    x000D   x000D  table   x000D    width  100   x000D    x000D  td   x000D    border  1px solid  999  x000D    x000D  table p   x000D    margin  0  x000D    x000D   cap-height p   x000D    max-height  3em  x000D    overflow  hidden  x000D    x000D   lt table gt  lt tbody gt  x000D     lt tr class  cap-height  gt  x000D       lt td gt  lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  lt  td gt  x000D       lt td gt Foo lt  td gt  x000D     lt  tr gt  x000D     lt tr class  cap-height  gt  x000D       lt td gt  lt p gt Bar lt  p gt  lt  td gt  x000D       lt td gt Baz lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Qux lt  td gt  x000D       lt td gt  lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  lt  td gt  x000D     lt  tr gt  x000D   lt  tbody gt  lt  table gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

Putting div inside a td made it work for me     lt table width  100   gt       lt tr gt  lt td gt  lt div style  font-size 2px  height 2px  vertical-align middle   gt  amp nbsp  lt  div gt  lt  td gt  lt  tr gt

User · Answer

I had to do this to get the result that I wanted:

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td>

It refused to work with only the cell or the div and needed both.

User · Answer

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    x000D   x000D  td container  gt  div   x000D      width  100   x000D      height  100   x000D      overflow hidden  x000D    x000D  td container   x000D      height  20px  x000D    x000D   lt table gt  x000D       lt tr gt  x000D           lt td class  container  gt  x000D               lt div gt This is a long line of text designed not to wrap  x000D                   when the container becomes too small  lt  div gt  x000D           lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    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

User · Answer

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.

[html] How to fix height of TR?

The answer is

Setting the `td` height to less than the natural height of its content

Much more simply...

Examples related to html

Examples related to html-table

Examples related to row

Tags