Lock table cells to their default size regardless of content

Answer 1

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 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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