Login/Register
How to hide Table Row Overflow?
Asked Answered
Solved htmlcsshtml-table
S

7

61

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>
Senhauser answered 12/10, 2009 at 14:34 Comment(2)
Any particular reason you're using a <table> rather than doing it with divs/spans+CSS? The 2nd method is more of a pain to get right but offers greater flexibility. I'm not sure it's possible to do what you want using a regular table. – Szechwan
I am using a table because I am displaying tabular data! – Senhauser
P
105

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

Plath answered 12/10, 2009 at 14:58 Comment(7)
Only downside (it seems), is that the table cell widths are identical. Any way to get around this? – Senhauser
Not as far as I know - I believe an assumption is made on the browsers part that since no individual cell widths are defined, to split the table width evenly amongst the number of cells. The only possible way to get around this that I can think of would be to calculate a width for each cell based on the number of characters each contains (out of the total number of characters for all cells), either server or client-side (the former probably being the more performant choice). Does this sound overkill? – Plath
out of total characters in all cells on the row in question is what I meant in my last comment :) – Plath
Yes I believe that would be overkill. I wish I could get this to work without table-layout:fixed, that would be ideal. – Senhauser
@Josh - Removing table-layout:fixed stops the overflowing text from being hidden, but as a result, the table width will grow. How would the browser know what width to make each cell (without specified widths for each)? Am I misunderstanding your requirement? – Plath
Had a similar problem and also needed table to be display: block – Leery
I want to limit the maximum height of rows. It doesn't appear that table-layout:fixed and a fixed height on the table and white-space:pre on the cells accomplishes that. (Leaving aside that a fixed height for the whole table is unacceptable anyway.) Is that possible without wrapping cell content in a block level element with overflow:hidden? – Cure
O
24

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;
}
Overwind answered 4/3, 2011 at 16:15 Comment(3)
Better approach than setting the whole table fixed. – Unbeaten
This doesn't work with percentage width, such as responsive designs. Ideally, I'd want to set this column to 100% width and have the overflow adjust accordingly as the page is resized. Any hints towards resolving this? – Detta
Wow, old thread, but hey - in my use case, I also want the markup not to reside within the innerHtml of the TD element - because I have javascript that allows users to download the tabular data. Again, it's tabular data - not marked-up content - within the table (in my case). – Mistrustful
W
10

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. ;)

Whidah answered 13/6, 2012 at 21:15 Comment(0)
G
2

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)

Glynnis answered 12/10, 2009 at 14:34 Comment(1)
But the width will fluctuate based on how much data is to be displayed within it. It's not like I am using monospaced fonts here!! – Senhauser
V
2

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>
Vow answered 27/2, 2014 at 8:52 Comment(2)
I should add that the advantage here is that I do not need to set any absolute widths of columns. The design is fluid. – Vow
The problem here is, how do you know which cell to assign which class to? Unless you manually type every page you'll ever need, Web 1.0-style, this isn't a catch-all solution. – Resile
B
0

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/

Blackfoot answered 13/5, 2013 at 14:14 Comment(0)
R
0

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

overflow effect

Reconnoitre answered 3/3, 2018 at 8:57 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.