html表有3列,最后一列宽度灵活宽。前两列共享剩余空间,固定比率为25/75%

时间:2017-08-03 14:04:50

标签: html css css3 html-table

最后一列的宽度取决于内容。 前两列共享剩余空间,固定比率为25/75% 我合作过:

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

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

1 个答案:

答案 0 :(得分:0)

我认为有可能使用多个表格,如下所示。我在一张桌子里面做了两张桌子。在我想要的时候使用了不同的table-layout

&#13;
&#13;
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;}
&#13;
<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>
&#13;
&#13;
&#13;