gpt4 book ai didi

html - 如何避免行在表中垂直均匀分布

转载 作者:可可西里 更新时间:2023-11-01 13:35:05 24 4
gpt4 key购买 nike

我有一个表格,其中的跨行如下所示:

+----------+---------+
| Spanned | Row A |
| row | |
| (several +---------+
| lines of | Row B |
| text) | |
+----------+---------+

A 行和 B 行的内容垂直顶部对齐,但 Rows 也垂直均匀分布,与跨行的高度相同。我希望结果是这样的:

+----------+---------+
| Spanned | Row A |
| row +---------+
| (several | Row B |
| lines of | |
| text) | |
+----------+---------+

也就是说,我希望A行尽可能小,只有B行垂直展开。这可以做到吗?我已经通过 CSS 尝试了各种样式,包括最小高度,但行似乎总是分布均匀。实际上,我的行数比 A 和 B 多,我只希望最后一行垂直扩展超出实际内容。我无法预测任何行中的实际内容量,因此显式设置高度将不起作用。

最佳答案

如果没有您的 html 标记,则很难回答。但是你想要的行为似乎是 Chrome 下的默认行为。

您需要为您的行设置一个固定的高度,并将最后一行设置为“自动”,这样它将填充表格的其余高度。

对于 firefox,我使用了这段代码:

<html>
<head>
<style type="text/css">
table td {
border: 1px solid black;
width: 200px;
vertical-align: top;
}

table tr {
height: 1.2em;
}

table tr.last {
height: auto;
}

</style>
</head>
<body>
<table>
<tr>
<td rowspan="2">Several lines of text. Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
<td>Line A</td>
</tr>
<tr class="last">
<td>Line B</td>
</tr>
</table>
</body>
</html>

请注意,您可以使用 CSS 伪类而不是我使用的“最后”类,具体取决于您希望能够支持的浏览器。

关于html - 如何避免行在表中垂直均匀分布,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18742221/

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