Lock table cells to their default size regardless of content

Question

If I have

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

and

table
    { width: 100%; height: 100%; }

Each cell takes up an equal quarter of the table, and the table stretches to fit the window.

How can I prevent these table cells from resizing themselves to fit the content within the cells (while still fitting the table's container)?

Answer 1

I have managed to do this without fixed table layout. The cell's css:

.dataCell {
  display: table-cell;
  padding: 2px 15px 2px 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: auto;
  max-width: 1px;
}

Answer 2

You can do it by using position: absolute on the content of each table cell: because if you do then the size of the content doesn't affect the size of the cell.

To do this, you must then also position the table cells (so that absolute positioning of the content is relative to the table cell) -- and/or, to support Firefox, position an extra div within the table cells since Firefox doesn't let you apply position to the cells themselves.

For example, I'm using this HTML:

<td><div class="bigimg"><img src="...."/></div></td>

Together with the following CSS, so that the size of the image doesn't affect the size of the cell which contains it:

div.bigimg
{
    height: 100%;
    width: 100%;
    position: relative;
}
div.bigimg > img
{
    position: absolute;
    top: 0;
    left: 0;
}

I set the height and width of div.bigimg to 100% to match the size of the td which contains it, because I'm using JavaScript to resize the images at run time to fit their containers, which are the div.bigimg.

---

Here's another example, using text instead of images -- same principle though, i.e. position: absolute inside position: relative inside each cell and the cells don't fit the content.

Answer 3

You could try to pick a single cell to chew up all the space and set that to 100% height and width:

<table>
    <tr>
        <td>Hi There.</td>
        <td>x</td>
    </tr>
    <tr>
        <td>Here is some text.</td>
        <td class="space-hog"></td>
    </tr>
</table>

and some CSS:

table {
    width: 100%;
    height: 100%;
}
td {
    white-space: nowrap;
}
td.space-hog {
    width: 100%;
    height: 100%;
}

And a live example. You need to be careful to avoid unpleasant line wrapping when .space-hog does its thing, hence the white-space: nowrap. If you put the .space-hog in the last row then you can avoid pushing the interesting parts down.

Answer 4

You could try table-layout:fixed; - this sets the layout to a certain fixed size (specified in CSS) and ignores the content of the cells, so the width of the cell never changes. I'm not sure if this affects vertical layout or not.

More info on w3schools.