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

Posted 2023-03-05

【中文标题】无论内容如何，​​将表格单元格锁定为其默认大小

【英文标题】：Lock table cells to their default size regardless of content

【发布时间】：2011-06-06 23:17:41

【问题描述】：

如果我有

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

和

table
     width: 100%; height: 100%; 

每个单元格占据表格的四分之一，表格伸展以适应窗口。

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

【参考方案1】：

td width:50%; 将一直工作，直到表格变得足够小。

【讨论】：

事先不知道行数或列数怎么办？我一直在使用 javascript 为每个单元格指定百分比宽度和高度，但不能再这样做了。

我想不出纯 html/CSS 解决方案，您可能需要 Javascript。您可以尝试使用 CSS 溢出属性。

【参考方案2】：

您可以尝试选择一个单元格来咀嚼所有空间并将其设置为 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 放在最后一行，则可以避免将有趣的部分向下推。

【讨论】：

我不想让一个单元格占据所有空间——我希望单元格的宽度和高度相同，而不管内容如何。

好吧，我不清楚。我认为没有办法在 CSS 中说“使所有这些东西都具有相同的大小”，您必须说“让所有这些东西 Wpx 宽和 Hpx 高”并自己在服务器或 JavaScript 中计算尺寸。也许在问题中提供更多上下文，并且有人可能会想出一种全新的方法来完全避免表格大小的混乱。

【参考方案3】：

可能类似于使用overflow:hidden; 的东西？

【参考方案4】：

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

More info on w3schools.

【讨论】：

你是对的——它适用于水平宽度，但不适用于垂直宽度。我觉得即使是最简单的事情，CSS 也毫无用处。我只是想制作一个日历！

@RomanGaufman 我认为my answer to this question 也适用于垂直领域。

【参考方案5】：

您可以通过在每个表格单元格的内容上使用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;

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

---

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

【讨论】：

是否有一些解释为什么需要这样做？即使图像已经适合表格单元格，3x3 表格似乎也会调整大小！

@ericslaw 我不明白你的评论/问题。也许您可以将其作为新问题发布。

@PhilipRego 我不明白为什么——如果单元格的内容是position: absolute，那么它就不再是真正的内容，是不是，即不再定位为单元格的子级。您确定您的单元格内容是“位置：绝对”（例如，请参阅我的答案中的 HTML 和 CSS）？

@PhilipRego 将每个 p 包装在一个 div 中；使 div 位置相对，并使 p 位置绝对。然后表格将布局为好像每个单元格内没有任何内容（即单元格对于内容来说太小，除非您调整它们的大小），明显空的 div 将定位在每个单元格中，段落将定位在（但赢了'不影响）每个 div 的大小。

@PhilipRego 我在上面的答案中添加了您示例的更正版本。

【参考方案6】：

我已经设法在没有固定表格布局的情况下做到了这一点。 单元格的 css：

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

【参考方案7】：

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

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

【参考方案8】：

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

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