我正在尝试在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%;
}
当我输入“ width：8％”时，它将占用页面的所有空间。为什么？
这是一个好问题！我尝试了几次，这是我的观察结果：
td的宽度是相对于其父级tr的。默认情况下，tr是表格的宽度：100％。
由于您操纵了所有的td标签，当您使它们不再满足表的默认100％宽度时，由于不希望这样做，因此其空间的计算可能会变得有问题。
这就解释了为什么他们都<25％时就开始长大。
真正的问题似乎是：您想做什么？
如果您希望桌子占用更多或更少的空间，请执行以下操作：调整其宽度。
如果要使某个td大于其他td：请对每个td进行操作，同时始终使它们的总和等于表的宽度。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句