css - 用 css 替换 rowspan

Question

你好，

我正在尝试用 div 和 CSS 替换我的表格，但我想不出一种方法来模仿 rowspan 属性。这是我的原始代码:

<table>
 <tr>
  <td>some content</td>
  <td>some more content</td>
  <td rowspan="2">THIS is A COLUMN</td>
 </tr>
 <tr>
  <td colspan="2">SINGLE CELL ROW</td>
 </tr>
</table>

使用 CSS:

<header>
 <section>
  <div>some content</div>
  <div>some more content</div>
  <div rowspan="2">THIS is A COLUMN</div>
 </section>
 <section>
  <div>SINGLE CELL ROW</div>
 </section>
</header>

header {display:table;}
section {display:table-row;}
div {display:table-cell;}

但它不会工作，因为底部的 div 不会像预期的那样一直低于 rowspanned div。对此有任何 CSS 解决方案吗？

谢谢。

这不是重复的。我要求的是 ROWSPAN 而不是 colspan。

Answer 1

您可以通过稍微更改 HTML 标记并使用 Flexbox

来实现您想要的效果

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
table {
  width: 100%;
  border-collapse: collapse
}
td {
  border: 1px red solid
}
header {
  display: flex
}
section {
  flex: 1;
  font-size: 0;
}
section > div {
  border: 1px solid green;
  font-size: 16px
}
section:first-of-type div {
  border-right: 0
}
section:first-of-type div:not(:last-of-type) {
  width: 50%;
  display: inline-flex;
  border-bottom: 0;
}
section:last-of-type div {
  height: 100%;
  align-items: center;
  display: flex
}

<h2>TABLE</h2>
<table>
  <tr>
    <td>some content</td>
    <td>some more content</td>
    <td rowspan="2">THIS is A COLUMN</td>
  </tr>
  <tr>
    <td colspan="2">SINGLE CELL ROW</td>
  </tr>
</table>

<br />
<hr />

<h2>DIV</h2>

<header>
  <section>
    <div>some content</div>
    <div>some more content</div>
    <div>SINGLE CELL ROW</div>
  </section>
  <section>
    <div>THIS is A COLUMN</div>
  </section>
</header>