html – 中间双尺寸边框的CSS表格元素

2023年8月18日 215次阅读

我正在尝试创建一个基于CSS表格的布局,它在每个表格单元格周围都有一个均匀的间距/边框,并确保表格单元格总是相同的高度.这是我想要实现的一个例子：

《html – 中间双尺寸边框的CSS表格元素》

我的HTML目前看起来像这样：

.two-col.body-width {
  max-width: 1138px;
}
.two-col {
  display: table;
  clear: both;
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  box-sizing: border-box;
  border-spacing: 25px 0px;
}
.two-col > .col_container.align-top {
  vertical-align: top;
}
.layout .section-tout {
  position: relative;
  padding: 20px 40px 48px;
  background: #f4f4f3;
  border-left: 5px solid #da202a;
}
.two-col > .col_container {
  width: 50%;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
}
<section class="layout two-col body-width">
  <div class="col_container align-top section-tout">
    <!-- content goes here -->
  </div>
  <div class="col_container align-top section-tout">
    <!-- content goes here -->
  </div>
</section>

这是一个工作示例：https://jsfiddle.net/grzkgdp3/1/

我在这里几乎是完美的,但正如你从我更新的图像中看到的,我需要在中间加倍间距/边框,我看不到这样做的明智方法.

我可以看到我使用边框的解决方案：25px纯白色;在tabel-cell上.这解决了我的间距问题,但因为我需要左边的红色边框,然后我必须使用：after伪元素来应用它,这会让事情变得有些混乱.

如果有人有一个可靠的解决方案可以帮助它听起来很棒.

干杯!

更新

不幸的是我无法使用flexbox解决方案,因为我需要支持所有现代浏览器和IE9及更高版本.

最佳答案 有时我们必须弯曲以支持兼容性.我使用线性渐变来实现结果.

body {
  background: white;
}

.two-col.body-width {
  max-width: 1138px;
}

.two-col {
  display: table;
  clear: both;
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  box-sizing: border-box;
}

.two-col > .col_container.align-top {
  vertical-align: top;
}

.layout .section-tout p {
  position: relative;
  padding: 20px 40px 48px;
  margin: 0;
}

.two-col > .col_container {
  width: 50%;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0px 25px;
  background-image: linear-gradient(to right, transparent 25px, #da202a 25px, #da202a 30px, #f4f4f3 30px, #f4f4f3 calc(100% - 25px), transparent 0);
  background-image: -ms-linear-gradient(to right, transparent 25px, #da202a 25px, #da202a 30px, #f4f4f3 30px, #f4f4f3 -ms-calc(100% - 25px), transparent 0);
}
<section class="layout two-col body-width">
  <div class="col_container align-top section-tout">
    <p>
      See how there is different amounts of content, but the cells are always the same height, this is very important!
    </p>
  </div>
  <div class="col_container align-top section-tout">
    <p>
      Hi!
    </p>
  </div>
</section>

Working Fiddle

Working fiddle(不含钙)

点赞