gpt4 book ai didi

html - 表格单元格高度 - 是否也有一些必须遵守的最小尺寸?

转载 作者:可可西里 更新时间:2023-11-01 12:52:36 25 4
gpt4 key购买 nike

下面是一个 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 标签。对于我的窗口设置,滚动条宽度/高度是 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 标签,则滚动条不应滚动。对于小于 22 像素的高度,我该如何避免这种情况?

编辑:溢出:滚动是必要的。我从一个更大的代码集中提取了这个 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/

更多跟进

你说的“padding”是行高。据我了解 the specs这是由字体本身包含的指标决定的,默认情况下是字体大小的比例,这就是更改字体大小有效的原因。更改行高可为您提供绝对结果。

参见 this fiddle

关于html - 表格单元格高度 - 是否也有一些必须遵守的最小尺寸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8407403/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com