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

据我所知，您可以通过将styles 与table 即table-layout: fixed; 和width:100%; 一起应用来实现此目的。还有width 的td 使用px 和%。根据您的设计，您使用的是四列，而我为这四列编写了代码； 以下将是您的 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>

希望这是您所需要的。