tags:

views:

704

answers:

2

I have a situation on some tables where the data is too large to fit. So, it expands the cell vertically to accomodate 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>
+1  A: 

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

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

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)

Popara
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!!
Josh Stodola