使用百分比和固定大小調整 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>

希望這是你所需要的。