CSS Fix row height

Question

I m having this markup    lt style gt      table               border 1px solid black          width 400px          height 300px          border-collapse collapse            table tbody               border 1px solid red            table td               background yellow          padding 10px          border-bottom 1px solid green          height 20px         lt  style gt     lt table gt   lt tbody gt       lt tr gt  lt td gt test lt  td gt  lt  tr gt       lt tr gt  lt td gt test lt  td gt  lt  tr gt   lt  tbody gt   lt  table gt    What I need is that the rows won t stretch in height  Is there a way to have a fixed row height

User · Answer

Simply add style  line-height 0  to each cell  This works in IE because it sets the line-height of both existant and non-existant text to about 19px and that forces the cells to expand vertically in most versions of IE  Regardless of whether or not you have text this needs to be done for IE to correctly display rows less than 20px high

User · Answer

HTML Table row heights will typically change proportionally to the table height  if the table height is larger than the height of your rows   Since the table is forcing the height of your rows  you can remove the table height to resolve the issue   If this is not acceptable  you can also give the rows explicit height  and add a third row that will auto size to the remaining table height    Another option in CSS2 is the Max-Height Property  although it may lead to strange behavior in a table http   www w3schools com cssref pr dim max-height asp

User · Answer

I haven t tried it but if you put a div in your table cell set so that it will have scrollbars if needed  then you could insert in there  with a fixed height on the div and it should keep your table row to a fixed height

User · Answer

x000D   x000D       x000D      table tbody x000D        x000D          border 1px solid red  x000D        x000D      table td x000D        x000D          background yellow  x000D           x000D          border-bottom 1px solid green  x000D           x000D           x000D        x000D       tr0  x000D          line-height 0  x000D         x000D        tr0 td  x000D          background red  x000D         x000D   lt table gt  x000D   lt tbody gt  x000D       lt tr gt  lt td gt test lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt test lt  td gt  lt  tr gt      x000D       lt tr class  tr0  gt  lt td gt  lt  td gt  lt  tr gt  x000D   lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

You can also try this  if this is what you need    lt style type  text css  gt             table td div  height 20px overflow-y hidden      table td col1 div  width 100px      table td col2 div  width 300px    lt  style gt     lt table gt   lt tbody gt       lt tr gt  lt td class  col1  gt  lt div gt test lt  div gt  lt  td gt  lt  tr gt       lt tr gt  lt td class  col2  gt  lt div gt test lt  div gt  lt  td gt  lt  tr gt   lt  tbody gt   lt  table gt

[css] CSS: Fix row height

Examples related to css

Examples related to html-table

Examples related to row