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

回答1:

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.

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

回答3:

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.

回答4:

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.

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

回答6:

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

回答7:

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

回答8:

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.

来源：https://stackoverflow.com/questions/4654481/lock-table-cells-to-their-default-size-regardless-of-content

标签

html

css

html-table

resize

css-tables