CSS - fixed height on tr and fixed height on table?
You can set height:8px
to the first and second tr
. And remove the middle border from the empty cells in the last tr
.
.t-table { border: 1px solid black; height: 400px; border-collapse: collapse;}.t-table td { border: 1px solid black;}.t-table td:empty { border-left: 0; border-right: 0;}
<table class="t-table"> <tr style="line-height: 8px; height: 8px;"> <td>A</td> <td>B</td> </tr> <tr style="line-height: 8px; height: 8px;"> <td>1</td> <td>2</td> </tr> <tr> <td></td> <td></td> </tr></table>
How to fix height of TR?
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>
Fix height of a table row in HTML Table
the bottom cell will grow as you enter more text ... setting the table width will help too
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table id="content" style="min-height:525px; height:525px; width:100%; border:0px; margin:0; padding:0; border-collapse:collapse;">
<tr><td style="height:10px; background-color:#900;">Upper</td></tr>
<tr><td style="min-height:515px; height:515px; background-color:#909;">lower<br/>
</td></tr>
</table>
</body>
</html>
How to control tr height of table in CSS
You can set this explicitly in your css. For example:
table#recTable{width:100%; border:1px solid red;}
#recTable tr td {height:40px; border:1px solid red;}
HTML
<table id="recTable">
<tr><td>Something</td></tr>
<tr><td>Something else</td></tr>
</table>
http://jsfiddle.net/jasongennaro/qXpLM/
Borders just for example
How to add a fixed height to a table cell?
table-cells won't work with overflow: hidden
. Just wrap content in table-cell in div with max-height
and overflow: hidden
tbody tr td div{
max-height: 30px;
overflow: hidden;
}
Setting table row height
try this:
.topics tr { line-height: 14px; }
Related Topics
How to Embed a Google Drive Folder in a Website
How to Override Inline !Important
How to Rename HTML "Browse" Button of an Input Type=File
Flexbox: Wrong Width Calculation When Flex-Direction: Column, Flex-Wrap: Wrap
How to Justify a Horizontal List
R Web Scraping Across Multiple Pages
Bootstrap Print CSS Removes Background Color
Difference Between Width Auto and Width 100 Percent
Make <Body> Fill Entire Screen
Why Does Overflow Hidden Stop Floating Elements Escaping Their Container
How to Truncate Table Cells, But Fit as Much as Content Possible
HTML Image Not Showing in Gmail
How to Notify the HTML Container That the Swf Has Finished, Using Swfobject