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

【问题标题】：Table Cell Height - Is there some minimum size one must adhere too?表格单元高度 - 是否也必须遵守一些最小尺寸？
【发布时间】：2019-02-06 22:19:42
【问题描述】：

以下是一个 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) 表格宽度为 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。小于 22 像素（高度）我得到一个滚动条。大于 22px，我得到一个不滚动的滚动条。 如果 div 标签计算正确，则滚动条不应滚动。对于小于 22 像素的高度，我该如何避免这种情况？

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

【问题讨论】：

标签： html html-table

【解决方案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

【讨论】：

你知道，在这里发帖之前，我认为它可能与字体大小有关，因为我记得玩过那个确切的关键字。我以为我试过了（但使用的是 px 而不是 em）。我还想，没有任何文字，为什么会影响我？无论如何，当我回到家时，我会尝试你的建议。我绝对可能把事情搞砸了。总之，我喜欢这个 jsfiddle.net 网站……看起来很酷！非常感谢您抽出宝贵的时间，迫不及待想尝试一下。
设置字体大小有效。给你的绿色复选标记。非常感谢。想一想，我确实弄乱了字体大小，但它是我在“真实代码”中的 div 标签（此处未显示）。我心中唯一悬而未决的问题是“5px”从何而来？意思是，如果我想让我的单元格的高度为 16 像素，我的字体大小不能大于 11 像素。也许某种类型的默认填充？我得到处玩。我想我在某处读到默认文本大小是 16px，所以我想我可以有 16px 字体大小和 16px 单元格高度。无论如何，再次感谢。

【解决方案2】：

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

使用您的 HTML + CSS。

我看不出问题是什么，您可以将其编辑为您的示例，然后使用修改后的 JSfiddle 编辑您的问题吗？

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

【讨论】：

overflow:scroll 是必要的。我将这个 HTML 从更大的一组代码中提取出来。在实际代码中，表格要大得多。 div 标签允许我显示一定数量的单元格，我可以滚动查看其余部分。当我在我的电脑附近时，我会添加到这里。
非常感谢您的帮助，因此我提高了您的答案 1。希望您能得到一些分数。

【解决方案3】：

采取

overflow:scroll

关闭 div.table_div

如果你也想要它，还是用水平滚动条替换它

overflow-x:scroll

您还希望高度稍大一点以补偿滚动条的大小（大约为 26px iir）

【讨论】：

overflow:scroll 是必要的。我将这个 HTML 从更大的一组代码中提取出来。在实际代码中，表格要大得多。 div 标签允许我显示一定数量的单元格，我可以滚动查看其余部分。
如果您只想要其中一个滚动条，请使用 overflow-x:scroll 或 overflow-y:scroll
首先，感谢您的帮助。对此，我真的非常感激。我确实需要两个滚动条。这是包含冻结的第一列和标题的较大表的一部分。并且网格实际上具有覆盖有彩色背景的 div 标签。这有点像日程控制的只读显示。所以有 24 个单元格宽度（24 小时），第一列中可能有很多“用户”（此处未显示）。较小的高度正在破坏我的顶级计算（对于 div 覆盖）。为了在此处发布，我缩小了问题范围。
所以问题是表格单元格内的div有滚动条？并且您正在使用覆盖 div 中的表格来居中文本，因为更好的方法是使用 line-height，除非您打算在其中包含多行文本
非常感谢您的帮助，因此我提高了您的答案 1。希望您能得到一些分数。