无论内容如何，​​都将表格单元格锁定为其默认大小

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

如何防止这些表格单元格调整自身大小以适应单元格内的内容（同时仍然适合表格的容器）？

8 个解决方案

#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.

你可以试试table-layout：fixed; - 这将布局设置为某个固定大小（在CSS中指定）并忽略单元格的内容，因此单元格的宽度永远不会改变。我不确定这是否会影响垂直布局。

More info on w3schools.

关于w3schools的更多信息。

#2

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

您可以尝试选择一个单元格来咀嚼所有空间并将其设置为100％高度和宽度：

<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:

和一些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.

一个现实的例子。当.space-hog做它的东西时，你需要小心避免令人不快的换行，因此白色空间：nowrap。如果你将.space-hog放在最后一行，那么你可以避免将有趣的部分向下推。

#3

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

td {宽度：50％;将工作，直到表变得足够小。

#4

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.

您可以通过对每个表格单元格的内容使用position：absolute来执行此操作：因为如果这样做，则内容的大小不会影响单元格的大小。

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.

为此，您还必须定位表格单元格（以便内容的绝对定位相对于表格单元格） - 和/或，为了支持Firefox，在表格单元格中放置一个额外的div，因为Firefox不会让你将位置应用于细胞本身。

For example, I'm using this HTML:

例如，我正在使用此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:

与以下CSS一起使用，以便图像的大小不会影响包含它的单元格的大小：

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.

我将div.bigimg的高度和宽度设置为100％以匹配包含它的td的大小，因为我在运行时使用JavaScript调整图像大小以适应它们的容器，即div.bigimg。

#5

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

我设法做到这一点没有固定的表格布局。细胞的css：

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

#6

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

使用溢出的东西：隐藏;也许？

#7

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.

如果你注意到这有助于修复宽度而不是高度，这是因为在每个td单元格中可能仍然存在某种填充。添加填充：0px;到td的造型。

#8

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