首页 前端知识 CSS合并单元格四种方式:table/display/flex/grid

CSS合并单元格四种方式:table/display/flex/grid

2024-06-04 10:06:25 前端知识 前端哥 460 233 我要收藏

目录

方式一:table【最简单写法】

方式二:display: table--不推荐

方式三:display: flex

方式四:display: grid


效果图:

方式一:table【最简单写法】

  • colspan:规定单元格可横跨的列数。
  • rowspan:规定单元格可横跨的行数。

通过table的colspan和rowspan轻松实现单元格合并。

边框设置:th/td 加右下边框,table加左上边框。

<!--html-->
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th style="width: 100px;">种类</th>
    <th style="width: 100px;">名称</th>
    <th>描述</th>
  </tr>
  <tr>
    <td rowspan="2">水果</td>
    <td>香蕉</td>
    <td>香蕉(学名:Musa nana Lour.)是芭蕉科、芭蕉属植物。植株丛生,具匐匍茎,矮型的高3.5米以下,一般高不及2米...</td>
  </tr>
  <tr>
    <td>苹果</td>
    <td>苹果(Malus pumila Mill.),是落叶乔木,通常树木可高至15米,但栽培树木一般只高3-5米左右...</td>
  </tr>
  <tr>
    <td colspan="2">其他</td>
    <td>--</td>
  </tr>
</table>

<!--css-->
<style>
  table {
    width: 600px;
    table-layout: fixed;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
  }
  th, td {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
    text-align: center;
    padding: 12px 0;
    color: #666;
    font-size: 14px;
  }
  th {
    font-weight: normal;
  }
</style>

方式二:display: table--不推荐

外层div.distable设置样式display: table;

内层div.distable-cell*设置样式display: table-cell;

table布局下,可以实现合并单元格效果。有两点说明:

1)为合并单元格的行 设置边框时,比较复杂,容易错位。

2)浏览器缩放到200+%展示时,此布局会变形。

因此,这种写法并不推荐。

<div>
    <div class="distable border-sub-rb border-lt">
        <div class="distable-cell1">种类</div>
        <div class="distable-cell1">名称</div>
        <div class="distable-cell2">描述</div>
    </div>
    <div class="distable border-l">
        <div class="distable-cell1 border-rb" style="background-color: #ddd;border-color: red">水果</div>
        <div class="distable-cell3">
            <div class="distable border-sub-rb">
                <div class="distable-cell1">香蕉</div>
                <div class="distable-cell2">香蕉(学名:Musa nana Lour.)是芭蕉科、芭蕉属植物。植株丛生,具匐匍茎,矮型的高3.5米以下,一般高不及2米...</div>
            </div>
            <div class="distable border-sub-rb">
                <div class="distable-cell1">苹果</div>
                <div class="distable-cell2">苹果(Malus pumila Mill.),是落叶乔木,通常树木可高至15米,但栽培树木一般只高3-5米左右...</div>
            </div>
        </div>
    </div>
    <div class="distable border-r">
        <div class="distable-cell4 border-lb">其他</div>
        <div class="distable-cell2 border-bl" style="background-color: #ddd;border-color: red">--</div>
    </div>
</div>

<style>
    .distable {
        display: table;
        color: #666;
        font-size: 14px;
        box-sizing: border-box;
    }
    [class*=distable-cell] {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        box-sizing: border-box;
    }
    .distable-cell1 {
        width: 100px;
    }
    .distable-cell2 {
        width: 400px;
        padding: 12px 0;
    }
    .distable-cell3 {
        width: 500px;
    }
    .distable-cell4 {
        width: 200px;
    }
    .border-sub-rb [class*=distable-cell] {
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: 12px 0;
    }
    .border-lt {
        border-left: 1px solid #ddd;
        border-top: 1px solid #ddd;
    }
    .border-lb {
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    .border-l {
        border-left: 1px solid #ddd;
    }
    .border-rb {
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    .border-bl {
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
    }
    .border-r {
        border-right: 1px solid #ddd;
    }
</style>

方式三:display: flex

flex布局下,可以实现合并单元格效果。有两个难点:

1)合并单元格的垂直居中效果:flex布局嵌套,内层的flex设置align-items: center;

2)边框的设置:设置比较复杂,容易错位。

虽然可以实现合并单元格效果,并不推荐。

<div style="width: 600px;">
    <div class="flex-box border-sub-rb border-lt">
        <div class="flex-cell1">种类</div>
        <div class="flex-cell1">名称</div>
        <div class="flex-cell2">描述</div>
    </div>
    <div class="flex-box border-l">
        <div class="flex-cell1 border-b flex-cc" style="background-color: #ddd;border-color: red"><div>水果</div></div>
        <div class="flex-cell3 border-r">
            <div class="flex-box border-sub-bl">
                <div class="flex-cell1 flex-cc"><div>香蕉</div></div>
                <div class="flex-cell2 flex-cc" style="background-color: #ddd;border-color: red"><div>香蕉(学名:Musa nana Lour.)是芭蕉科、芭蕉属植物。植株丛生,具匐匍茎,矮型的高3.5米以下,一般高不及2米...</div></div>
            </div>
            <div class="flex-box border-sub-bl">
                <div class="flex-cell1 flex-cc"><div>苹果</div></div>
                <div class="flex-cell2 flex-cc"><div>苹果(Malus pumila Mill.),是落叶乔木,通常树木可高至15米,但栽培树木一般只高3-5米左右...</div></div>
            </div>
        </div>
    </div>
    <div class="flex-box">
        <div class="flex-cell4 border-lb flex-cc"><div>其他</div></div>
        <div class="flex-cell2 border-rbl flex-cc" style="background-color: #ddd;border-color: red"><div>--</div></div>
    </div>
</div>


<style>
    .flex-box {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        color: #666;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
    }
    [class*=flex-cell] {
        box-sizing: border-box;
    }
    .flex-cell1 {
        width: 100px;
    }
    .flex-cell2 {
        width: 400px;
        padding: 12px 0;
    }
    .flex-cell3 {
        width: 500px;
    }
    .flex-cell4 {
        width: 200px;
    }
    .border-sub-rb [class*=flex-cell] {
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: 12px 0;
    }
    .border-sub-bl [class*=flex-cell] {
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
    }
    .border-lt {
        border-left: 1px solid #ddd;
        border-top: 1px solid #ddd;
    }
    .border-lb {
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    .border-l {
        border-left: 1px solid #ddd;
    }
    .border-rbl {
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
    }
    .border-b {
        border-bottom: 1px solid #ddd;
    }
    .border-r {
        border-right: 1px solid #ddd;
    }
    .flex-cc {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
</style>

方式四:display: grid

grid布局学习成本会高一些,但代码看着最清晰。

grid有兼容性问题,谨慎使用。

<div class="container">
      <div class="item item-1"><div>种类</div></div>
      <div class="item item-2"><div>名称</div></div>
      <div class="item item-3"><div>描述</div></div>
      <div class="item item-4"><div>水果</div></div>
      <div class="item item-5"><div>香蕉</div></div>
      <div class="item item-6"><div>香蕉(学名:Musa nana Lour.)是芭蕉科、芭蕉属植物。植株丛生,具匐匍茎,矮型的高3.5米以下,一般高不及2米...</div></div>
      <div class="item item-7"><div>苹果</div></div>
      <div class="item item-8"><div>苹果(Malus pumila Mill.),是落叶乔木,通常树木可高至15米,但栽培树木一般只高3-5米左右...</div></div>
      <div class="item item-9"><div>其他</div></div>
      <div class="item item-10"><div>--</div></div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(6, 100px);
    color: #666;
    font-size: 14px;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
  }
  .item {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    text-align: center;
    padding: 12px 0;
    display: grid;
    align-items: center;
  }
  .item-1 {
    grid-column: 1 / 2;
  }
  .item-2 {
    grid-column: 2 / 3;
  }
  .item-3 {
    grid-column: 3 / 7;
  }
  .item-4  {
    grid-row: 2 / 4
  }
  .item-6 {
    grid-column: 3 / 7;
  }
  .item-8 {
    grid-column: 3 / 7;
  }
  .item-9 {
    grid-column: 1 / 3;
  }
  .item-10 {
    grid-column-end: span 4;
  }
</style>

总结:

table布局仍是实现合并单元格最简单的方式,grid次之,flex再次,display:table不推荐。

The End

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10751.html
标签
评论
发布的文章

js-jquery页面跳转集合

2024-06-08 22:06:13

echarts柱状图数据过多

2024-06-08 22:06:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!