Question

以下是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">&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</td>
</tr>
<tr>
<td class="TheTableColumnCell">&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</td>
</tr>
<tr>
<td class="TheTableColumnCell">&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</td>
</tr>
</table>
</div>

</body>
</html>

值得注意的是：

a）表格宽度为361px，因为：每个单元格119px（119 x 3 = 357）。然后为四个边框添加4px。

b）表高度为100px，因为：每个单元格为32px（32 x 3 = 96）。然后为四个边框添加4px。

c）div标签。对于我的Windows设置，滚动条宽度/高度为17px。这就是为什么你看到div的宽度和高度为378px（361 + 17）和117px（100 + 17）。 div的目的是以防我实际上必须滚动（在我的3x3示例中，我不需要）。

总结：这是一个3x3固定宽度/高度表。如果将该代码剪切并粘贴到html文件中并在浏览器中打开它，您将看到滚动条，但实际上两者都不会滚动（因为我将宽度/高度设置为显示所有内容而不滚动）

问题：

执行以下操作：

不要使每个单元格的高度为32px，而是将它们设为16px。因此， table.TheTable 的高度应更改为52px（而不是100px）。 div.table_div 的高度应更改为69px（而不是117px） - 再次，我的滚动条高度为17px。

垂直滚动条虽然始终可见，但现在滚动。我现在不能适应一切？但我认为我的计算是正确的？神奇的数字似乎是22px。小于22px（高度）我得到一个滚动的滚动条。大于22px，我得到一个不滚动的滚动条。 如果正确计算div标记，则滚动条不应滚动。如何在高于22px的高度避免这种情况？

编辑：溢出：滚动是必要的。我从一个更大的代码集中提取了这个HTML。在实际代码中，表格要大得多。 div标签允许我显示一定数量的单元格，我可以滚动查看其余的单元格。当我开始玩高度小于22px的时候，就在我发现这个问题的时候。因为它与我正在尝试做的其他一些事情混在一起。

Answer 1

您的问题现在变成了字体大小/行高：

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

Answer 2

采取

overflow:scroll

关闭div.table_div

如果你想要它仍然有horozontial滚动条替换它

overflow-x:scroll

你也会想要一个更大的高度来弥补滚动条的大小（约为26px iir）

Answer 3

我创建了http://jsfiddle.net/EZ6q2/

使用HTML + CSS。

我看不出问题是什么，你可以编辑你的例子然后用修改后的JSfiddle编辑你的问题吗？

注意
我已从表中删除了overflow:scroll属性，因为它具有固定的高度/宽度。

表格单元格高度 - 是否必须遵守一些最小尺寸？

3 个答案: