防止行扩大表格宽度答案

【问题标题】：Prevent row from expanding table width防止行扩大表格宽度
【发布时间】：2015-10-04 07:49:09
【问题描述】：

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

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

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

谁能帮助我们？

【问题讨论】：

第二行需要滚动吗？
是的！只需添加overflow:auto 就会出现滚动

标签： html css html-table width cell

【解决方案1】：

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

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

CSS

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

【讨论】：