Question

我试图用HTML / CSS制作表格，但单元格的宽度遇到了麻烦。当我在CSS的“ table td”中输入“ width：24％”时，表格单元格保持所需的大小。好，很好。但是当我输入“ width：15％”时，表格单元格会增加？？？当我输入“ width：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>

这是所有CSS代码：

h1{
    color: gray;
    font-family: Bodoni, serif;
}

body{
    text-decoration: blink;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    padding: 5%;
    padding-top: 1%;
}

table{
    margin: 2.5%;
    border-collapse: collapse;
    table-layout: fixed;
}
caption{
    caption-side: bottom;
}

.italico{
    font-style: italic;
}

.img_flickr{
    text-align: center;
    padding-top: 2.5%;
}

.img_flickr > a > img{
    width: 50%;
    min-width: 200px;
}

table tr{
    text-align: center;
}
table td{
    width: 24%;
}

Answer 1

总宽度应为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

Answer 2

当我输入“ width：8％”时，它将占用页面的所有空间。为什么？

这是一个好问题！我尝试了几次，这是我的观察结果：

td的宽度是相对于其父级tr的。默认情况下，tr的宽度为表格的100％。

由于您操纵了所有的td标签，当您使它们不再满足表的默认100％宽度时，由于这是无法预期的，因此其空间的计算可能会变得很麻烦。

这可以解释为什么他们都<25％时就开始长大。

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

如果您希望桌子占用更大或更小的空间：请调整其宽度。

如果您希望某个td比其他td大：请对每个td进行操作，同时始终使它们的总和等于表的宽度。

为什么CSS中的td宽度百分比似乎不起作用？

2 个答案: