Menu
I have some html tables where the textual data is too large to fit. So, it expands the cell vertically to accommodate for this. So now rows that have the overflow are twice as tall as rows with smaller amounts of data. This is unacceptable. How can I force table to have the same row height of 1em?
Here is some markup that reproduces the problem. Table should only be the height of one line, with the overflowing text hidden.
<!DOCTYPE html> <html> <head> <title>Test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> table { width:250px; } table tr { height:1em; overflow:hidden; } </style> </head> <body> <table border="1"> <tr> <td>This is a test.</td> <td>Do you see what I mean?</td> <td>I hate this overflow.</td> </tr> </table> </body> </html> 
535
To use the CSS overflow property with its "hidden" value on the HTML <td> element, you need to set the table-layout property with the "fixed" value and an appropriate width on the <table> element. Then, you need to add the overflow property set to "hidden" and white-space property set to "nowrap" on the table cell.
Approach: The white-space property must be set to “nowrap” and the overflow property must be set to “hidden”. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.
To prevent cells (rows) from expanding vertically, you have to set a fixed height for table rows. Select the relevant rows and, on the Table Tools Layout tab, click Properties. On the Row tab, select "Specify height" and then choose "Exactly" for "Row height is." Specify the desired amount.
A hidden attribute on a <tr> tag hides the table row. Although the table row is not visible, its position on the page is maintained.
Need to specify two attributes, table-layout:fixed on table and white-space:nowrap; on the cells. You also need to move the overflow:hidden; to the cells too
table { width:250px;table-layout:fixed; } table tr { height:1em; } td { overflow:hidden;white-space:nowrap; } Here's a Demo . Tested in Firefox 3.5.3 and IE 7
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
