63

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>
Improve this question
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. Commented Oct 12, 2009 at 14:56
  • 82
    I am using a table because I am displaying tabular data! Commented Oct 12, 2009 at 16:31

7 Answers 7

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Only downside (it seems), is that the table cell widths are identical. Any way to get around this?
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?
out of total characters in all cells on the row in question is what I meant in my last comment :)
Yes I believe that would be overkill. I wish I could get this to work without table-layout:fixed, that would be ideal.
@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?
|
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;
}
Improve this answer

3 Comments

Better approach than setting the whole table fixed.
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?
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).
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. ;)

Improve this answer

Comments

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)

Improve this answer

1 Comment

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!!
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>
Improve this answer

2 Comments

I should add that the advantage here is that I do not need to set any absolute widths of columns. The design is fluid.
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.
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/

Improve this answer

Comments

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.