Html 中间有两倍大小边框的CSS表格元素

我试图创建一个基于CSS表格的布局，每个表格单元周围都有一个均匀的间距/边框，并确保表格单元始终保持相同的高度。以下是我努力实现的一个例子：

我的HTML当前如下所示：

.two-col.body-width{
最大宽度：1138px；
}
.两列{
显示：表格；
明确：两者皆有；
保证金：0自动；
填充：20px0；
宽度：100%；
框大小：边框框；
边框间距：25px 0px；
}
.two col>.col\u container.align-top{
垂直对齐：顶部；
}
.版图.版图{
位置：相对位置；
填充：20px 40px 48px；
背景#f4f3；
左边框：5px实心#da202a；
}
.two col>.col\u容器{
宽度：50%；
显示：表格单元格；
文本对齐：左对齐；
垂直对齐：中间对齐；
框大小：边框框；
}

---

您是否考虑过Flexbox

*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
背景：白色；
}
.双柱体宽{
最大宽度：1138px；
填充：25px；
}
.两列{
显示器：flex；
保证金：0自动；
框大小：边框框；
}
.版图.版图{
位置：相对位置；
背景：粉红色；
填充：20px；
左边框：5px实心#da202a；
弹性：01 50%；
显示器：flex；
}
.two col>div：第一个孩子{
右边距：50px；
}

看看怎么会有不同数量的内容，但是单元格的高度总是一样的，这是非常重要的！


你好

有时我们必须努力支持兼容性。我使用了

线性渐变

来获得结果

正文{
背景：白色；
}
.双柱体宽{
最大宽度：1138px；
}
.两列{
显示：表格；
明确：两者皆有；
保证金：0自动；
填充：20px0；
宽度：100%；
框大小：边框框；
}
.two col>.col\u container.align-top{
垂直对齐：顶部；
}
.布局图.剖面图{
位置：相对位置；
填充：20px 40px 48px；
保证金：0；
}
.two col>.col\u容器{
宽度：50%；
显示：表格单元格；
文本对齐：左对齐；
垂直对齐：中间对齐；
框大小：边框框；
填充：0px 25px；
背景图像：线性渐变（向右，透明25px，#da202a 25px，#da202a 30px，#f4f3 30px，#f4f3计算（100%-25px），透明0）；
背景图像：-ms线性梯度（向右，透明25px，#da202a 25px，#da202a 30px，#F4f3 30px，#F4f3-ms计算（100%-25px），透明0）；
}

看看怎么会有不同数量的内容，但是单元格的高度总是一样的，这是非常重要的！


你好

放置一个

.col\u容器如何。将顶部的
元素与
宽度：0px
对齐？嘿@Mr\u Green我刚刚尝试过这个，它完全弄乱了布局。您不想使用flexbox有什么原因吗？你需要这个布局来有更多的行和垂直对齐的列吗？@lukehillonline我是说。。顺便说一句，你为什么不把这些元素嵌套到表单元格中呢？@U Green先生把一个元素像那样挤进去，在我看来，这不是一个好的解决方案。另外，它会打乱我的网格逻辑。看起来不错，浏览器对此的支持是什么，我需要支持IE9IE10，恐怕需要支持。Dam，+1是一个好的解决方案，但不幸的是，我不能在IE9上让步。这是一个有趣的解决方案，我认为IE9不支持线性渐变。我们需要为此设置
-ms过滤器吗？@lukehillonline使用
-ms
供应商前缀进行尝试<代码>-ms线性梯度
。