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

Question

Last column has a flexible width dependent on the content. The first two columns share the remaining space with a fixed ratio of 25/75% I worked with:

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

Works on desktop but it doesn't work on mobile devices.

Answer 1

I think it may be possible using more then one table as you can see below. I have made two tables inside one table. And used different-different table-layout s when I wanted.

 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>