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

news2025/1/23 8:03:30

目录

方式一：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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/408228.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【vue2】近期bug收集与整理02

【vue2】近期bug收集与整理02

⭐【前言】 在使用vue2构建页面时候&#xff0c;博主遇到的问题难点以及最终的解决方案。 &#x1f973;博主&#xff1a;初映CY的前说(前端领域) &#x1f918;本文核心&#xff1a;博主遇到的问题与解决思路 目录⭐数据枚举文件的使用⭐elementUI中分页组件使用的注意事项⭐v…
阅读更多...
vue解决Not allowed to load local resource

vue解决Not allowed to load local resource

前言 在进行通过本地路径进行加载图片的时候&#xff0c;突然就报了这个问题 Not allowed to load local resource 这个是由于安全性的问题&#xff0c;导致浏览器禁止直接访问本地文件 那么&#xff0c;这边我说一下我具体是怎么解决的吧 问题描述 我的项目是用的vue的vant…
阅读更多...
webpack -v报错：Cannot find module ‘webpack-cli/package.json‘

webpack -v报错：Cannot find module ‘webpack-cli/package.json‘

-D安装了webpack和webpack-cli&#xff0c;-g安装了webpack和webpack-cli&#xff0c;但是webpack -v的时候仍然提示需要安装webpack-cli&#xff0c;并且安装之后会报错&#xff1a; 看提示应该是webpack-cli/package.json的位置获取不到正确的&#xff0c;但是并不知道为什么…
阅读更多...
【附源码】解决pdf.js跨域并从url动态加载pdf文档

【附源码】解决pdf.js跨域并从url动态加载pdf文档

0. Abstract 当我们想用PDF.js从URL加载文档时&#xff0c;将会因遇到跨域问题而中断&#xff0c;且是因为会触发了PDF.js和浏览器的双重CORS block&#xff0c;这篇文章将会介绍&#xff1a;①如何禁用pdf.js的跨域&#xff1f;②如何绕过浏览器的CORS加载URL文件&#xff1f…
阅读更多...
axios请求中以params或body形式传递参数的区别

axios请求中以params或body形式传递参数的区别

一、前言&#xff1a; 前端发送请求最常⽤的是get请求还有post请求&#xff0c;get请求只能传query参数&#xff0c;query参数都是拼在请求地址上的&#xff0c;post可以传body和query两种形&#xff1b;我在开发的时候通常使用的是Axios第三方库进行网络请求&#xff0c;所以这…
阅读更多...
教你如何用CSS修改图片颜色

教你如何用CSS修改图片颜色

看到题目是不是吓了一跳&#xff1f;css竟然还有这个操作&#xff1f;还真是第一次听说~ 原理嘛&#xff0c;其实很简单的&#xff0c;用到的就是 CSS3 滤镜filter中的drop-shadow&#xff0c;该滤镜可以给图片非透明区域添加投影。你可以理解为下图 它实现的效果看上去就像使原…
阅读更多...
npm install常见报错及问题

npm install常见报错及问题

目录一、ERESOLVE unable to resolve dependency tree1.可能性一&#xff1a;镜像源无法访问2.可能性二&#xff1a;npm版本过低或者过高3.可能性三&#xff1a;node和npm版本不匹配二、Error: EACCES: permission denied, mkdir /usr/local/lib/node_modules/yarn三、Error: C…
阅读更多...
【2022-05-31】JS逆向之易企秀

【2022-05-31】JS逆向之易企秀

提示&#xff1a;文章仅供参考&#xff0c;禁止用于非法途径 文章目录前言一、页面分析二、参数u获取三、总结前言 我滴个姥姥&#xff0c;好像是好久没跟了呀&#xff0c;主要是实在不知道写啥了 今天这个表单是最近碰到&#xff0c;就拿出来分享下吧 一、页面分析 表单可以…
阅读更多...
解决：code ERESOLVE：ERESOLVE could not resolve 的报错问题

解决：code ERESOLVE：ERESOLVE could not resolve 的报错问题

1、报错分析&#xff1a; 其一、报错的代码及信息为&#xff1a; A、报错的代码&#xff1a; ERESOLVE could not resolve B、报错的信息展示为&#xff1a; 其二、报错的问题分析&#xff1a; A、找到报错的代码为&#xff1a; npm i sass-loader7.3.1 B、为什么会报错…
阅读更多...
JS获取当前节点的兄弟/父/子节点

JS获取当前节点的兄弟/父/子节点

目录 JS获取当前节点的方式&#xff1a; 获取子节点&#xff1a; 获取父节点&#xff1a; 获取兄弟节点 JS获取当前节点的方式&#xff1a; 通过事件监听器获取当前节点&#xff1a; <button onclick"fun(this)"></button> function fun(obj){// …
阅读更多...
若依vue3 前端微应用改造

若依vue3 前端微应用改造

一、前言 这篇是记录解决若依vue3版本微应用改造&#xff0c;但是自己之前也试过vue-element-admin框架的微应用改造&#xff0c;前端主流的微应用技术不怎么挑框架的&#xff0c;而且注入方式大同小异。但自己之前尝试的时候踩过很多坑&#xff0c;但是确实比较麻烦&#xff…
阅读更多...
Javascript知识【jQuery样式操作案例：jQuery隔行换色】

Javascript知识【jQuery样式操作案例：jQuery隔行换色】

&#x1f482; 个人主页: 爱吃豆的土豆&#x1f91f; 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 &#x1f3c6;人必有所执&#xff0c;方能有所成&#xff01; &#…
阅读更多...
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码

【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码

el-table合并单元格 1.固定合并 官方挺提供的合并具体某行列的方法:el-table合并行或列通过给table传入span-method方法可以实现合并行或列&#xff0c;方法的参数是一个对象&#xff0c;里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。 …
阅读更多...
CSS中的伪类和伪元素（详细）

CSS中的伪类和伪元素（详细）

这篇想要跟大家分享的是css中的伪类和伪元素&#xff0c;有任何问题可以私聊我或者评论哦&#xff01; 首先&#xff0c;我们先来想一下 一、引入伪类跟伪元素的原因&#xff1f; 伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述 比如CSS没有“段落的第一行”、…
阅读更多...
[error] Error: Fail to open IDE 问题解决

[error] Error: Fail to open IDE 问题解决

问题描述&#xff1a;接手前辈的微信小程序项目&#xff08;uni-app搭建&#xff09;&#xff0c;使用HBuilder编译器&#xff0c;&#xff0c;控制台报 [error] Error: Fail to open IDE 错误原因一&#xff1a;微信小程序AppID错误解决方法&#xff1a;如图点击项目目录 mani…
阅读更多...
wangeditor5在vue3中的全使用过程（图片上传、附件上传、工具栏配置、编辑器配置）

wangeditor5在vue3中的全使用过程（图片上传、附件上传、工具栏配置、编辑器配置）

1、参考官方的wangeditor5-for-vue3的开发手册 官方文档地址&#xff1a;https://clinfc.github.io/wangeditor5-for-vue3/guide/ 说明为说明要编写这编博客文章&#xff1f; 官方文档的使用手册对于新手来说比较的难看懂&#xff0c;写的也不够详细&#xff0c;源码的封装比较…
阅读更多...
vue3+vite项目配置ESlint、pritter插件

vue3+vite项目配置ESlint、pritter插件

前言 入行前端工作将近两年多时间了&#xff08;如果算上实习&#xff09;&#xff0c;从一开始vue2入门&#xff0c;到现在vue3前端变化是真的快&#xff0c;刚了解webpack搭建项目流程&#xff0c;vite又横空出世&#xff0c;不得不说前端变化真的太快了&#xff0c;所以只有…
阅读更多...
【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例（附源码）

【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例（附源码）

&#x1f41a;作者简介&#xff1a;苏凉&#xff08;专注于网络爬虫&#xff0c;数据分析&#xff0c;正在学习前端的路上&#xff09; &#x1f433;博客主页&#xff1a;苏凉.py的博客 &#x1f310;系列总专栏&#xff1a;web前端基础教程 &#x1f451;名言警句&#xff1a…
阅读更多...
自己的智能AI聊天机器人，可自定义头像，免费html源码分享，粘贴即用！

自己的智能AI聊天机器人，可自定义头像，免费html源码分享，粘贴即用！

1.展示效果效果预览图&#xff1a;新增小功能&#xff1a;① 在原有的基础上加入了本地实时存档的功能&#xff0c;按照下面的步骤便可以随时在本地查看以往和智能AI所有的聊天记录哦&#xff01;再也不用担心关闭网页后先前的聊天内容全部消失啦&#xff01;PS&#xff1a;最新…
阅读更多...
解决宝塔 Nginx 跨域问题Access-Control-Allow-Origin

解决宝塔 Nginx 跨域问题Access-Control-Allow-Origin

何为跨域&#xff1f; 1、资源跳转&#xff1a; A链接、重定向、表单提交 2.资源嵌入&#xff1a; <link>、<script>、<img>、<frame>等dom标签&#xff0c;还有样式中background:url()、font-face()等文件外链 3.脚本请求&#xff1a; js发起的ajax请…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023