Html 为什么CSS中td的宽度百分比不'；好像不行？

我试图用HTML/CSS制作一个表格，但我在单元格宽度方面遇到了问题。当我把“宽度：24%”放在CSS中的“表格td”中时，表格单元格保持我想要的大小。好的，太好了。但当我写下“宽度：15%”时，表格单元格会增长？？？当我写“宽度：8%”时，它占据了页面的所有空间。为什么?

以下是表格的HTML代码：

<table  border="1">
        <caption>RGB colors and their combinations</caption>
        <tr>
            <td> </td> <td bgcolor="#FF0000">RED</td> <td bgcolor="#00FF00">GREEN</td> <td bgcolor="#0000FF">BLUE</td>
        </tr>
        <tr>
            <td bgcolor="#FF0000">RED</td> <td bgcolor="#FF0000"> </td> <td bgcolor="#FFFF00"> </td> <td bgcolor="#FF00FF"> </td>
        </tr>
        <tr>
            <td bgcolor="#00FF00">GREEN</td> <td bgcolor="#FFFF00"> </td> <td bgcolor="#00FF00"> </td> <td bgcolor="#00FFFF"> </td>
        </tr>
        <tr>
            <td bgcolor="#0000FF">BLUE</td> <td bgcolor="#FF00FF"> </td> <td bgcolor="00FFFF"> </td> <td bgcolor="#0000FF"> </td>
        </tr>
    </table>

---

总宽度应为100%

设置宽度为20%时，第一个单元格宽度或其他单元格宽度应为40%

---

请将样式更改为：

table
{
    width: 100%;
    margin: 2.5%;
    border-collapse: collapse;
    table-layout: fixed;
}

table td
{
    width: 20%;
}

table td:first-child
{
    width: 40%;
}

当您想将样式设置为第一个单元格时，应使用下面的代码

td:first-child

当我写“宽度：8%”时，它占据了页面的所有空间。为什么?

这是个好问题！我试过几次，以下是我的观察结果：

td的宽度相对于其父级tr。tr默认为表的100%宽度

由于您操作了所有的td标记，当您使它们不再满足表的默认100%宽度时，它的空间计算可能会出现问题，因为这是不可能的

这就解释了为什么当他们都<25%时，他们就开始长大

真正的问题似乎是：你想做什么？

如果希望表格占用较大或较小的空间，请操纵其宽度

---

如果您希望某个td比其他td大：操纵它们，同时始终使它们的组合等于表宽。

我不明白。我正在设置第一个单元格的宽度？谢谢！！我只是想改变整个表的大小，并保持列的大小相等（并且在调整页面窗口大小时不会出现错误）。。。

td:first-child