Lock table cells to their default size regardless of content

Answer 1

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 2

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;
}