How Can I Force All Rows In A Table To Have The Same Height
I am trying to build a html table but I want to force all rows to have the same height (no matter how much content is in the cells). If a cell overruns the space, I want it to jus
Solution 1:
IE only
CSS:
#fixedheight {
table-layout: fixed;
}
#fixedheighttd {
height: 20px;
overflow: hidden;
width: 25%;
}
HTML:
<tableid="fixedheight"><tbody><tr><td>content</td><td>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</td><td>more content</td><td>small content</td><td>enough already</td></tr></tbody></table>Universal solution
CSS:
#fixedheight {
table-layout: fixed;
}
#fixedheighttd {
width: 25%;
}
#fixedheighttddiv {
height: 20px;
overflow: hidden;
}
HTML:
<tableid="fixedheight"><tbody><tr><td><div>content</div></td><td><div>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</div></td><td><div>more content</div></td><td><div>small content</div></td><td><div>enough already</div></td></tr></tbody><table>Solution 2:
Set the CSS height property to what you want the cell heights to be, and use overflow: hidden (see CSS overflow) to prevent contents from expanding the cells.
Solution 3:
Give the table a class:
<table class="myTable">...</table>
And in the CSS, try the following:
table.myTabletd {
height: 20px;
overflow: hidden;
}
Solution 4:
The CSS Styles you will want to set are: display:block, min-height, and max-height.
<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>JS Bin</title><style>html{font-size:16px;}
table{}
tabletr{
display:block;
border-bottom:solid green 1px;
height:.8em;
min-height:.8em;
max-height:.8em;
background-color:#E300E3;
overflow:hidden;
}
</style></head><body><tableid="MyTable"><tr><td>16px Font-Size</td><td>Column2</td></tr></table></body></html>
Post a Comment for "How Can I Force All Rows In A Table To Have The Same Height"