Html 带单元格间距但无外部间距的全宽表格

这个问题类似于，但有一个附加的要求：我希望表在其父表内具有100%的宽度。从该问题复制图像：

因此，我希望“绿色部分”占据父级的100%宽度，并且单元格之间的间距为黄色

我们可以使用表上的负边距来“撤销”红色间距，至少在大多数情况下是这样

但是，这并不总是适用于流体布局。实际上，只要有足够的内容使表格占据100%的宽度（表格具有

width:auto

），它就可以正常工作。当没有足够的内容来做这件事时，问题就会出现，因为显而易见的解决方案

width:100%

并没有解决这一问题：表的宽度足以容纳包含边框间距的父表，但我们正在剥离它，因此表不再足够宽

到目前为止，我发现的唯一“解决方案”是强制用长的、最好是看不见的内容填充表格，这样表格将填充到“真实的”100%。但是我希望有一个纯css的解决方案。。。我也不希望使用计算/表达式来获得尽可能大的浏览器支持

body{padding:1em}
部分{背景色：黄色}
表{背景色：粉红色}
td{背景色：浅绿色}
表{边框间距：1em}
table.working，table.failing{margin:-1em；}
table.failing{宽度：100%}

简表
第1单元
第2单元


两个单元格的成功“100%宽度”
包含大量内容的单元格，以确保表格足够宽
包含大量内容的单元格，以确保表格足够宽


未成功的100%宽度
餐桌
100%宽度

要实现这一点，您需要手动处理一些css

body{padding:1em}
部分{背景色：黄色；}
表{背景色：粉红色；}
td{背景色：浅绿色}
表{边框间距：0；}
表1.工作，
/*表1.1{页边距：-1em；}*/
表1.2{宽度：100%；边距：0；}
表tr td{
边框：5px实心#ff0000；
填充：10px；
}
没有上衣{
边界顶部：无；
}
1.没有底部{
边框底部：无；
}
1.没有了{
左边界：无；
}
不，对{
边界权：无；
}

简表
第1单元
第2单元


两个单元格的成功“100%宽度”
包含大量内容的单元格，以确保表格足够宽
包含大量内容的单元格，以确保表格足够宽


未成功的100%宽度
餐桌
100%宽度
餐桌
100%宽度

Flexbox这里有一个选项？@j08691非常好的一点。。。我忘记了那个选项，因为浏览器支持率一般，但我想现在没问题了。我的特殊问题可以通过父屏幕上的

justify content:space-between

来解决。不过，我不能明确设置“间距”的大小，因为它是根据子对象的大小来设置的。但我相信它可以被调整到看起来很好，所以它肯定是一个不错的选择（可以随意添加它作为答案）。我将暂时不回答这个问题，因为我很好奇是否可以在flexbox之前完成。如果不是。。。是的，但那样的话，红色的填充物仍然存在。我不想要红色的填充物，换句话说，我想要绿色的边与黄色的边对齐。（在我的评论开始时，我指的是我不想要的表格边缘的红色填充物。单元格之间的填充物是我唯一想要保留的）检查答案新建..您设置的边框间距为：1em，导致出现粉红色填充。但现在单元格之间的填充也消失了：）我确实希望单元格之间有填充，但不希望表格边缘有填充。请检查我原始代码片段中的第二个案例：这就是我想要的。但对于内容太少的表可能不可能。您是指单元格内填充（td）吗？