We have a unique table structure where the first row contains two cells and the second row contains only one cell. The width of each cell is determined by its content.
Our goal is to prevent the cell in the second row from expanding the overall table width, while also making sure that the table width adjusts based on the width of the cells in the first row. We want the second row to be scrollable without using fixed widths or position: absolute, as there are additional rows below it.
Here is an example to illustrate our current setup:
<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>
If anyone has any suggestions or solutions for us, we would greatly appreciate your help!