CODEWITHSUNDEEP
htmlcsshtml-tableresizecss-tables
Nick
Nick

Reputation: 5440

Lock table cells to their default size regardless of content

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)?

Upvotes: 8

Views: 37003

Answers (9)

user8112809
user8112809

Reputation:

None of the answers were working for me. I found a hack that works for me:

td {
  max-width: 0;
}

This is almost definitely wrong, but I'm desperate, so into the codebase it goes.

Honestly just use CSS grid. This crap is stupid.

Upvotes: 0

ChrisW
ChrisW

Reputation: 56133

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.

enter image description here

Upvotes: 2

Vinnie James
Vinnie James

Reputation: 6062

You can also lock the cells to a percentage, in order to maintain responsiveness, eg:

  td:first-child, th:first-child {
    width: 20%;
  }
  // assuming you have 8 remaining columns (20 + 10*8 = 100%)
  td:not(:first-child), th:not(:first-child) {
    width: 10%;
  }

Upvotes: 1

Amy Liu
Amy Liu

Reputation: 1

Add table-layout:fixed; to the table's styling.

If you notice this helps fix the width but not the height, this is because there might still exist some sort of padding within each td cell. Add padding:0px; to the td's styling.

Upvotes: -2

Galvani
Galvani

Reputation: 246

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

Upvotes: 2

whostolemyhat
whostolemyhat

Reputation: 3123

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.

Upvotes: 15

mu is too short
mu is too short

Reputation: 434985

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.

Upvotes: 1

nchpmn
nchpmn

Reputation: 874

Something along the lines of using overflow:hidden; perhaps?

Upvotes: 0

Jake
Jake

Reputation: 13151

td{ width:50%; } will work until the table gets small enough.

Upvotes: 0

Related Questions