防止行扩展 table 宽度

Question

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

我们要防止第二行单元格扩展 table，并使此 table 宽度取决于第一行单元格的宽度，从而使第二行可滚动。

重要的是不要在此单元格上使用固定宽度或 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>

有人可以帮助我们吗？

Answer 1

我不完全确定你想要实现什么，但我试了一下。请参阅 my fiddle。

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

CSS

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

防止行扩展 table 宽度

Prevent row from expanding table width

html

css

html-table

cell

width