防止行扩展表宽度

问题描述 投票:0回答:1

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

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

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

有人可以帮助我们吗?

html css html-table width cell
1个回答
0
投票

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

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

CSS

.maintable > tbody > tr > td {
    border: 1px solid black;
}
.datacell {
    max-width: 1px;
}
© www.soinside.com 2019 - 2024. All rights reserved.