下面是一个 3 x 3 的表格:
<html>
<body style="overflow:hidden;">
<style>
div.table_div {overflow:scroll;width:378px;height:117px;position:relative;}
table.TheTable {width:361px;height:100px;table-layout:fixed;border-collapse:collapse;border:1px solid #000000;}
td.TheTableColumnCell {text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border:1px solid #000000;}
</style>
<div class="table_div" id="table_div">
<table class="TheTable">
<tr id='firstTr'>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
</table>
</div>
</body>
</html>
值得注意的是:
a) 表格宽度为 361 像素，因为:每个单元格为 119 像素 (119 x 3 = 357)。然后为四个边框添加 4px。
b) 表格高度为 100 像素，因为:每个单元格为 32 像素 (32 x 3 = 96)。然后为四个边框添加 4px。
c) div 标签。对于我的 Windows 设置，滚动条宽度/高度为 17px。这就是为什么你会看到 div 的宽度和高度为 378px (361 + 17) 和 117px (100 + 17)。 div 的目的是以防我真的必须滚动(在我的 3x3 示例中，我真的不必)。
总结:这是一个 3x3 固定宽度/高度的表格。如果您将该代码剪切并粘贴到 html 文件中并在浏览器中打开它，您将看到滚动条，但实际上两者都不允许您滚动(因为我将宽度/高度设置为显示所有内容而不滚动) .
问题:
请执行下列操作:
不要将每个单元格的高度设为 32 像素，而是将它们设为 16 像素。因此， table.TheTable 的高度应该更改为 52px(而不是 100px)。 div.table_div 的高度应该更改为 69px(而不是 117px) - 同样，我的滚动条高度是 17px。
垂直滚动条虽然始终可见，但现在可以滚动。我现在装不下所有东西？但我认为我的计算是正确的？神奇的数字似乎是 22px。小于 22px(高度)我得到一个滚动的滚动条。大于 22px，我得到一个不滚动的滚动条。 如果 div 标签计算正确，滚动条不应滚动。对于小于 22px 的高度，如何避免这种情况？
编辑:溢出:滚动是必要的。我从一个更大的一组代码中提取了这个 HTML。在实际代码中，表格要大得多。 div 标签允许我显示一定数量的单元格，我可以滚动查看其余的单元格。当我开始玩高度小于 22px 的时候，我就发现了这个问题。因为它与我正在尝试做的其他一些事情相混淆。
最佳答案
您的问题现在已成为字体大小/行高:
http://jsfiddle.net/EZ6q2/1/
您将需要减小字体大小:
http://jsfiddle.net/EZ6q2/2/
或行高
http://jsfiddle.net/EZ6q2/3/
回应您的评论
空白仍然是内容，将算作一行上的文本。完全清空单元格也解决了 Fire Fox 中的问题。请注意这一点，因为某些浏览器会完全折叠空单元格(我在一些较旧的浏览器中遇到过这种情况，也许是 IE 6)。
http://jsfiddle.net/EZ6q2/5/
多一点跟进
您所指的“填充”是行高。根据我对 the specs 的理解，这是由字体本身包含的指标决定的，默认情况下是字体大小的一部分，这就是更改字体大小起作用的原因。改变行高会给你一个绝对的结果。
见 this fiddle
关于html - 表格单元格高度 - 是否也必须遵守一些最小尺寸？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8407403/