如何使用SASS/CSS使HTML表格具有全宽

我正在尝试仅使用SASS/CSS设计

表的样式。我已将
表的
宽度设置为
100%
。但是，当我将
th
元素的字体大小设置为
0.8em
时，我的表无法获得允许的所有宽度（请注意，列未到达右侧的边框线）。如果我不控制HTML，我如何使用CSS修复这个问题


SASS/CSS

表格{
颜色：黑色；
背景色：白色；
边框颜色：黑色；
边框样式：实心；
边框宽度：0 1px 1px 1px；
边界半径：5px；
边界塌陷：塌陷；
边界间距：0；
显示：块；
溢出：自动；
宽度：100%；
泰德{
th{
颜色：白色；
背景色：黑色；
字体大小：粗体；
字号：0.8em；
填充物：5px10px；
垂直对齐：底部对齐；
}
第一个孩子{
边框左上半径：5px；
}
最后一个孩子{
边框右上角半径：5px；
}
}
t车身{
运输署{
边框顶部：1px纯色灰色；
填充物：5px10px；
垂直对齐：顶部；
}
tr:n个孩子（2n）{
背景颜色：浅灰色；
}
}
}

方法
运行时
卑鄙
比率
第0代/1k Op
分配内存/操作
基线
Clr
1.833美元
1
2.0542
6.31 KB
从表中删除显示：块


#容器，tr{
宽度：100%；
}
html，正文{
宽度：100%；
}
#容器{
边界半径：15px；
背景色：黑色；
}
桌子{
颜色：黑色；
背景色：白色；
边框颜色：黑色；
边框样式：实心；
边框宽度：0 1px 1px 1px；
边界半径：5px；
边界塌陷：塌陷；
边界间距：0；
溢出：自动；
宽度：98%；
保证金：0自动；
}
th{
颜色：白色；
背景色：黑色；
字体大小：粗体；
字号：0.8em；
填充物：5px10px；
垂直对齐：底部对齐；
}
第一个孩子{
边框左上半径：5px；
}
最后一个孩子{
边框右上角半径：5px；
}
运输署{
边框顶部：1px纯色灰色；
填充物：5px10px；
垂直对齐：顶部；
}
tr:n个孩子（2n）{
背景颜色：浅灰色；
}

方法
运行时
卑鄙
比率
第0代/1k Op
分配内存/操作
基线
Clr
1.833美元
1
2.0542
6.31 KB
这是我想你想要的，我刚刚删除了
边框折叠
，
显示：块
（这使表格成为默认CSS），这是一个，还有一个工作片段：


表格{
颜色：黑色；
背景色：白色；
边框颜色：黑色；
边框样式：实心；
边框宽度：0 1px 1px 1px；
边界半径：5px；
边界塌陷：分离；
边界间距：0；
显示：表格；
溢出：自动；
宽度：100%；
}
表thead th{
颜色：白色；
背景色：黑色；
字体大小：粗体；
字号：0.8em；
填充物：5px10px；
垂直对齐：底部对齐；
}
表THAD th：第一个孩子{
边框左上半径：5px；
}
表THAD th：最后一个孩子{
边框右上角半径：5px；
}
表tbody td{
边框顶部：1px纯色灰色；
填充物：5px10px；
垂直对齐：顶部；
}
表tbody tr:n第n个子项（2n）{
背景颜色：浅灰色；
}

方法
运行时
卑鄙
比率
第0代/1k Op
分配内存/操作
基线
Clr
1.833美元
1
2.0542
6.31 KB
如果我这样做，我会失去桌子上的圆角。我如何保存它们？将桌子放在一个div中，并绕过div的各个角落。我已经更新了代码段，是否可以不使用额外的
div
？我无法控制HTML。当然，去掉额外的div。将表显示更改为内联块。然后将td的宽度设置为100/6=16.66px，如果还有任意数量的列怎么办？有没有一种可扩展的方法可以做到这一点？