HTML表格：列宽百分比

我有一个有7列的表。我希望列的宽度如下：

• 3列x

  width=20%

• 4列x

  width=10%

我已经创建了两个CSS类，每个宽度一个，我将它们分配给每个单元格

我有一件事，但那不起作用的是这个。相反，宽度始终包裹内容。如果我只放一个字母，宽度就会很小，如果我放大的字符串，宽度就会太大。我希望它保持不变

CSS和HTML：

表格{
宽度：100%；
}
.10{
宽度：10%
}
.二十{
宽度：20%；
}

H1
氢
H3
H4
H5
H6
H7
A1
A2
A3
A4
A5
A6
A7
地下一层
地下二层
地下三层
B4
B5
B6
B7

您的CSS按照预期工作，其表头和单元格的宽度是正确的。然而：

默认情况下，

th

应用了文本对齐：居中，而

td

元素未应用

因此，您应该向td或th添加相同的文本对齐方式。例如：

th {
    text-align: left;
}

---

要固定宽度，可以使用

您可能还希望使用标记为列同时指定宽度和bg

表格{
宽度：100%；
表布局：固定；
}
.10{
宽度：10%；
背景：番茄；
}
.二十{
宽度：20%；
背景：绿松石
}
/*再见*/
运输署{
边框：实心；
}
/*玩bg细胞和COL*/
tr:n个孩子（偶数）：n个孩子（奇数）{
背景：rgba（100255,50,0.3）；
}
tr:n个孩子（奇数）：n个孩子（偶数）{
背景：rgba（255255,0.3）；
}

H1
氢
H3
H4
H5
H6
H7
A1
A2
A3
A4
A5
A6
A7
地下一层
地下二层
地下三层
B4
B5
B6
B7
A1
A2
A3
A4
A5
A6
A7
地下一层
地下二层
地下三层
B4
B5
B6
B7

我将您的代码转换成了一个片段，并按预期工作。