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    lt table class  tableContainer  cellspacing  10px  gt       lt tr style  height 15px   gt           lt td gt NHS Number lt  td gt           lt td gt  amp  160  lt  td gt           lt td gt Date of Visit lt  td gt           lt td gt  amp  160  lt  td gt           lt td colspan  3  gt Care Time Started lt  td gt           lt td gt  amp  160  lt  td gt           lt td rowspan  2  style  text-align right vertical-align bottom   gt  amp  9745  lt  td gt           lt td rowspan  2  style  font-weight bold vertical-align bottom   gt Tick when lt br  gt                         care starts lt  td gt       lt  tr gt       lt tr gt           lt td width  90  class  tableContainerRow2  gt  amp  160  lt  td gt           lt td  gt  amp  160  lt  td gt           lt td width  80  class  tableContainerRow2  gt  amp  160  lt  td gt           lt td  gt  amp  160  lt  td gt           lt td width  40  class  tableContainerRow2  gt  amp  160  lt  td gt           lt td  width  5  gt   lt  td gt           lt td width  40  class  tableContainerRow2  gt  amp  160  lt  td gt                   lt td  gt  amp  160  lt  td gt       lt  tr gt   lt  table gt

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.

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

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

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

I had to do this to get the result that I wanted    lt td style  font-size 3px  float left  height 5px  vertical-align middle   colspan  7  gt  lt div style  font-size 3px  height 5px  vertical-align middle   gt  lt b gt  lt hr gt  lt  b gt  lt  div gt  lt  td gt    It refused to work with only the cell or the div and needed both

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

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

[html] How to fix height of TR?

Examples related to html

Examples related to html-table

Examples related to row