具有 3 列的 html 表格，最后一列宽度灵活。前两列以固定比例 25/75% 共享剩余空间

Question

最后一列的宽度取决于内容。前两列以固定比例 25/75% 共享剩余空间我曾与:

<colgroup>
    <col width="24%">
    <col width="74%">
    <col width="2%">
</colgroup>

适用于桌面设备，但不适用于移动设备。

Answer 1

我认为可以使用多个表格，如下所示。我在一张 table 里面做了两张 table 。并在需要时使用不同的 table-layout。

table {width: 100%;}
.table-parent {table-layout: auto; background: yellow;}
.table-child-1 {table-layout: fixed; background: red;}
.table-child-2 {table-layout: auto; background: green;}

<table class="table-parent">
	<tr>
		<td valign="top">
			<table class="table-child-1">
				<tr>
					<td bgcolor="pink" width="25%">
						First Column
					</td>
					<td bgcolor="purple" width="75%">
						Second Column
					</td>
				</tr>
			</table>
		</td>
		<td>
			<table class="table-child-2">
				<tr>
					<td>
						Lorem ipsum dolor sit amet, consectetur adipisicing 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>
			</table>
		</td>
	</tr>
</table>