使用百分比和固定大小调整 HTML 表格列大小？

Question

我想创建一个具有以下列宽的表格。

是否可以同时使用百分比和绝对宽度，如图所示？

这是因为某些列在特定宽度以下没有意义，并且始终需要相同的宽度，而其他列则更灵活。

Answer 1

干得好：

 #fixed{ table-layout:fixed; } td{ border:1px solid red; } td:nth-child(even){ background-color: grey; }

 <table id="fixed" border="0" style="width:100%;border-collapse:collapse;"> <tr> <td style="width:50px;">1</td> <!--Fixed width--> <td style="width:50%">Title</td> <td style="width:50%">Interpret</td> <td style="width:20px">1</td> </tr> </table>

Answer 2

我能理解的是，您可以通过应用带有table styles来实现这一点，即table-layout: fixed; 和width:100%; . 还有使用px和%的td width 。 根据您的设计，您使用了四列，而我为这四列编写了代码； 以下将是您的 CSS；

 table { table-layout: fixed; width: 100%; } td:first-child { width: 50px; } td:last-child { width: 20px; } .second-column { width: 50%; } .third-column { width: 50%; } td:nth-child(odd) { background-color: grey; } td:nth-child(even) { background-color: silver; }

 <table> <tr> <td>1</td> <td class="second-column">2</td> <td class="third-column">3</td> <td>4</td> </tr> </table>

希望这是你所需要的。