Question

如果我有

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

和

table
    { width: 100%; height: 100%; }

每个单元占据表的相等四分之一，并且表伸展以适合窗口。

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

Answer 1

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

More info on w3schools

Answer 2

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

为此，您还必须定位表格单元格（以便内容的绝对位置相对于表格单元格） - and/or, to support Firefox, position an extra div within the table cells，因为Firefox不允许您将位置应用于单元格本身

例如，我正在使用此HTML：

<td><div class="bigimg"><img src="...."/></div></td>

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

div.bigimg
{
    height: 100%;
    width: 100%;
    position: relative;
}
div.bigimg > img
{
    position: absolute;
    top: 0;
    left: 0;
}

我将height的{{1}}和width设置为div.bigimg以匹配包含它的100%的大小，因为我使用的是JavaScript在运行时调整图像大小以适合其容器，即td。

这是另一个例子，使用文本而不是图像 - 虽然相同的原则，即位置：绝对内部位置：每个单元格内部相对，单元格不适合内容。

Answer 3

我设法在没有固定表格布局的情况下完成此操作。单元格的css：

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

Answer 4

您可以尝试选择单个单元格来咀嚼所有空间并将其设置为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>

和一些CSS：

table {
    width: 100%;
    height: 100%;
}
td {
    white-space: nowrap;
}
td.space-hog {
    width: 100%;
    height: 100%;
}

和live example。当.space-hog执行其操作时，您需要小心避免令人不快的换行，因此white-space: nowrap。如果您将.space-hog放在最后一行，那么您可以避免将有趣的部分向下推。

Answer 5

您还可以将单元格锁定为百分比，以保持响应性，例如：

  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

td{ width:50%; }将一直有效，直到表变得足够小。

Answer 7

或许可以使用overflow:hidden;？

Answer 8

将table-layout:fixed;添加到表格的样式中。

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

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

8 个答案:

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

8 个答案:

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