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>
This question is related to
html
css
html-table
The answer is
wrap the table in a div with class="container"
div.container {
width: 100%;
overflow-x: auto;
}
then
#table_id tr td {
white-space:nowrap;
}
result
Here´s something I tried. Basically, I put the "flexible" content (the td which contains lines that are too long) in a div container that´s one line high, with hidden overflow. Then I let the text wrap into the invisible. You get breaks at wordbreaks though, not just a smooth cut-off.
table {
width: 100%;
}
.hideend {
white-space: normal;
overflow: hidden;
max-height: 1.2em;
min-width: 50px;
}
.showall {
white-space:nowrap;
}
<table>
<tr>
<td><div class="showall">Show all</div></td>
<td>
<div class="hideend">Be a bit flexible about hiding stuff in a long sentence</div>
</td>
<td>
<div class="showall">Show all this too</div>
</td>
</tr>
</table>
In general, if you are using white-space: nowrap; it is probably because you know which columns are going to contain content which wraps (or stretches the cell). For those columns, I generally wrap the cell's contents in a span with a specific class attribute and apply a specific width.
Example:
HTML:
<td><span class="description">My really long description</span></td>
CSS:
span.description {
display: inline-block;
overflow: hidden;
white-space: nowrap;
width: 150px;
}
If javascript is accepted as an answer, I made a jQuery plugin to address this issue (for more information about the issue see CSS: Truncate table cells, but fit as much as possible).
To use the plugin just type
$('selector').tableoverflow();
Plugin: https://github.com/marcogrcr/jquery-tableoverflow
Full example: http://jsfiddle.net/Cw7TD/3/embedded/result/
Only downside (it seems), is that the table cell widths are identical. Any way to get around this? – Josh Stodola Oct 12 at 15:53
Just define width of the table and width for each table cell
something like
table {border-collapse:collapse; table-layout:fixed; width:900px;}
th {background: yellow; }
td {overflow:hidden;white-space:nowrap; }
.cells1{width:300px;}
.cells2{width:500px;}
.cells3{width:200px;}
It works like a charm :o)
In most modern browsers, you can now specify:
<table>
<colgroup>
<col width="100px" />
<col width="200px" />
<col width="145px" />
</colgroup>
<thead>
<tr>
<th>My 100px header</th>
<th>My 200px header</th>
<th>My 145px header</th>
</tr>
</thead>
<tbody>
<td>100px is all you get - anything more hides due to overflow.</td>
<td>200px is all you get - anything more hides due to overflow.</td>
<td>100px is all you get - anything more hides due to overflow.</td>
</tbody>
</table>
Then if you apply the styles from the posts above, as follows:
table {
table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
overflow: hidden;
white-space: nowrap;
}
The result gives you nicely hidden overflow throughout the table. Works in latest Chrome, Safari, Firefox and IE. I haven't tested in IE prior to 9 - but my guess is that it will work back as far as 7, and you might even get lucky enough to see 5.5 or 6 support. ;)
Source: Stackoverflow.com