个人中心
gpt4 book ai didi

css - 使用 Flexbox 在 上模拟 "rowspan"
转载 作者：太空宇宙 更新时间：2023-11-04 01:20:03 26 4
gpt4 key购买 nike

我正在尝试模拟 rowspan在我的 <table> , 使用 flexbox .

我使用 flexbox 的原因，而不只是一个普通的 table , 是出于 js 排序的原因。在每个“ list ”( <tr> )中，我需要模拟多个 <tr>的。

这是我需要的:

enter image description here

这是我试过的:

<table>
  <tr>
    <td class="a"></td>
    <td class="b"></td>
    <td class="c"></td>
    <td class="d"></td>
    <td class="e"></td>
  </tr>
</table>

CSS:

table {
    width: 100%;
}

tr {
    display: flex;
  flex-wrap: wrap;
  flex-direction: row;

  height: 200px;
}

.a {
  flex: 0 0 25%;
  background: green;
}

.b {
  flex: 0 0 25%;
  background: blue;}

.c {
  flex: 0 0 25%;
  background: red;
}

.d {
  flex: 0 0 25%;
  background: yellow;
    height: 100%;
}

.e {
  flex: 0 0 75%;
  background: gray;
}

Jsfiddle

我看不到我的出路。这不可能吗？

最佳答案

这对于 flexbox 是不可能的(实际上，直到 display:contents 获得更多支持)，除非您更改 HTML 并将列换行。不过 CSS-Grid 可以做到这一点。

table {
  width: 100%;
}

tr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 200px;
}

.a {
  grid-row: 1;
  background: green;
}

.b {
  grid-row: 1;
  background: blue;
}

.c {
  grid-row: 1;
  background: red;
}

.d {
  background: yellow;
  grid-row: 1 / 3;
}

.e {
  grid-column: 1 / span 3;
  background: gray;
}
<table>
  <tr>
    <td class="a"></td>
    <td class="b"></td>
    <td class="c"></td>
    <td class="d"></td>
    <td class="e"></td>
  </tr>
</table>

关于css - 使用 Flexbox 在 <table> 上模拟 "rowspan"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49282135/

26 4 0
文章推荐： python - Excel 分隔文件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com