【发布时间】：2012-03-15 19:28:27
【问题描述】：
正如标题所说，我想要一个 HTML 表格，允许其列和行的大小独立于单元格内容。如果行不够高或列不够宽以显示单元格的所有内容，则该内容应该简单地消失在单元格后面。
我想出了以下解决方案，它在 chrome (17) 和 opera (11.61)、safari (5)、IE (9) 中运行良好，但在 firefox 中却不行：
th, td {
position: relative;
overflow: hidden;
}
td > span {
position: absolute;
top: 0px;
}
th > div {
position: relative;
}
（设计是这样的，每个 td 只包含一个跨度和任何“真实”内容，就像文本在 td 内的跨度内一样。此外，每一行都有一个初始 th，并且有一个标题行只包含 th ，并且所有这些 th 都包含一个 div。通过在 th 中设置 DIV 的显式高度和宽度，我可以设置行的宽度和高度。）
下面的 HTML 说明了这个例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
<style type="text/css">
table {
border-width: 1px;
border-style: none none solid solid;
}
th, td {
border-width: 1px;
border-style: solid solid none none;
}
th > div {
height: 18px;
width: 50px;
}
th, td {
overflow: hidden;
position: relative;
}
td > span {
position: absolute;
top:0px;
}
th > div {
position: relative;
}
</style>
</head>
<body>
<table
cellspacing="0"
cellpadding="0"
style="font-size: 10pt"
>
<thead>
<tr>
<th><div>Header0</div></th>
<th><div>Header1</div></th>
<th><div style="width:25px">Header2</div></th>
</tr>
</thead>
<tbody>
<tr>
<th><div>Header1</div></th>
<td
style="
vertical-align: bottom
"
>
<span style="
font-size:6pt;
background-color: red;
">A</span>
</td>
<td>
<span style="
font-size:6pt;
background-color: blue;
">B</span>
</td>
</tr>
<tr>
<th><div>Header2</div></th>
<td>
<span style="
font-size:30pt;
background-color: yellow;
right: 0px
">C</span>
</td>
<td>
<span style="
font-size:30pt;
background-color: green;
">D</span>
</td>
</tr>
<tr>
<th><div style="height:10px">Header2</div></th>
<td>
<span style="
font-size:30pt;
background-color: yellow;
right: 0px
">E</span>
</td>
<td>
<span style="
font-size:6pt;
background-color: blue;
">F</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
这在 chrome 和 opera 中运行良好，它们都相对于 td 定位跨度（这就是我给它们位置的原因：相对）。但是，在 Firefox 中，td 的 position:relative 被完全忽略，并且跨度相对于具有绝对或相对位置的表行上方的第一个祖先进行定位。所以只有上面的规则，跨度的顶部粘在文档正文的顶部，如果我添加：
table {
position:relative
}
跨度的顶部粘在桌子的顶部。但是一个 position:relative 应用于 tr 或 td 似乎完全被忽略了。
我们将不胜感激任何对可行解决方案的见解。
更新 Firefox 根本不支持 position:relative 在表格单元格上。见https://bugzilla.mozilla.org/show_bug.cgi?id=35168#c11。 IMO，这是一个错误。尽管“标准”说这个设置的行为是未定义的，但其他浏览器似乎在以合理和有用的方式实现这一点时遇到了零麻烦，所以从我的角度来看，firefox 想要忽略这种事实上的行为。
经过一些实验，我想出了两个替代解决方案 - 它们都不是完美的 - 这对于面临同样问题的其他人可能有用，也可能没有用。
1) 对表格单元格使用 position:static 几乎可以解决 firefox 中的问题（而不改变所有其他提到的浏览器中的行为）。但是，如果您确实将 position:static 赋予表格单元格，那么当您在表格单元格上设置 text-align:right 时，就会出现一个新问题。虽然这在所有其他提到的浏览器中都可以正常工作（它们将跨度呈现在单元格内的右侧），但 firefox 再次显示了不同的行为，并将跨度显示在单元格的右侧 outside。
2）在表格上使用table-layout:fixed，将单元格内容直接放在单元格中（不是单独的span或div）。然后，您可以在 th 元素的样式中显式设置宽度和高度（请注意，在 th 元素内设置 div 的宽度/高度是不够的 - 您确实需要直接在 th 上执行此操作。这似乎google docs电子表格采用的方法。这种方法允许单元格内容比单元格宽。但是，您不能使表格行的高度小于单元格内容的高度。
【问题讨论】：
-
我明白了你的问题的要点，但我不能 100% 确定细节，特别是关于
span用法的部分。这个小提琴没有满足你的哪些要求：jsfiddle.net/philipf/wa2vR -
嗨菲利普！谢谢回复。看起来很有希望，但这需要我明确设置单元格内 DIV 的高度（所有单元格，而不是仅设置 TH 内 DIV 的明确高度和宽度）。如果我没有在您的解决方案中设置 TD 内的 DIV 的高度和可能的宽度，则行/列大小仍会被单元格内容的大小覆盖。