gpt4 book ai didi

html - 防止行扩展表格宽度

转载 作者:行者123 更新时间:2023-11-28 17:00:05 26 4
gpt4 key购买 nike

我们有一个表格,第一行有两个单元格,第二行有一个单元格。每个单元格的宽度取决于其内容。

我们要防止第二行单元格扩展表格,并使表格宽度取决于第一行单元格的宽度,使第二行可滚动。

重要的是不要在此单元格上使用固定宽度或 position: absolute,因为下面必须有其他行。

例子:

<HTML>
<HEAD>

<STYLE>
.maintable > tbody > tr > td {
border: 1px solid black;
}
.datacell {
white-space: nowrap;
}
</STYLE>
</HEAD>
<BODY>
<TABLE CLASS="maintable">
<TR>
<TD>
<DIV>
<LABEL>Field 1: </LABEL><INPUT TYPE="TEXT"><BR />
<LABEL>Field 2: </LABEL><INPUT TYPE="TEXT"><BR />
<LABEL>Field 3: </LABEL><INPUT TYPE="TEXT">
</DIV>
</TD>
<TD>
<DIV>
<LABEL>Field 4: </LABEL><INPUT TYPE="TEXT"><BR />
<LABEL>Field 5: </LABEL><INPUT TYPE="TEXT"><BR />
<LABEL>Field 6: </LABEL><INPUT TYPE="TEXT">
</DIV>
</TD>
</TR>
<TR>
<TD COLSPAN="2" CLASS="datacell">
Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</TR>
<TD COLSPAN="2">Test</TD>
</TABLE>
</BODY>
</HTML>

谁能帮助我们?

最佳答案

我不完全确定您想要实现什么,但我试了一下。请看my fiddle .

我为 .datacell 元素提供了 1% 的 max-width,这样它的宽度将取决于其他单元格。

CSS

.maintable > tbody > tr > td {
border: 1px solid black;
}
.datacell {
max-width: 1px;
}

关于html - 防止行扩展表格宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31427557/

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