帶3列的html表格，最後一列寬度靈活寬度。前兩列以25/75％的固定比例共享剩餘空間。

Question

最後一列的寬度取決於內容。 前兩列具有25/75％ 一個固定比我工作共享剩餘的空間：

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

工程上桌面，但它不移動設備上工作。

Answer 1

我認爲可能使用多個表格，如下所示。我在一張桌子內製作了兩張桌子。當我想要時使用不同的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"> 
 
\t <tr> 
 
\t \t <td valign="top"> 
 
\t \t \t <table class="table-child-1"> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td bgcolor="pink" width="25%"> 
 
\t \t \t \t \t \t First Column 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td bgcolor="purple" width="75%"> 
 
\t \t \t \t \t \t Second Column 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </table> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t \t <table class="table-child-2"> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </table> 
 
\t \t </td> 
 
\t </tr> 
 
</table>