位置: IT常识 - 正文

CSS合并单元格四种方式:table/display/flex/grid(css合并为单一边框)

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

目录

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

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

方式三:display: flex

方式四:display: grid


推荐整理分享CSS合并单元格四种方式:table/display/flex/grid(css合并为单一边框),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css表格合并,css margin 合并,css合并为单一边框,css合并列,css如何合并表格边框,css如何合并表格边框,css 合并单元格,css 合并单元格,内容如对您有帮助,希望把文章链接给更多的朋友!

效果图:

方式一: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)为合并单元格的行 设置边框时,比较复杂,容易错位。

CSS合并单元格四种方式:table/display/flex/grid(css合并为单一边框)

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.jiuchutong.com/zhishi/282735.html 转载请保留说明!

上一篇:Svchost.exe不停下载上传文件很占网速该怎么办?(svchost一直在下载什么)

下一篇:深度linux怎么更换账户图片? 用户头像的设置方法(深度linux使用入门教程)

  • 如何让顾客觉得你的产品“不贵”(如何让顾客觉得花钱是一种荣耀作文)

    如何让顾客觉得你的产品“不贵”(如何让顾客觉得花钱是一种荣耀作文)

  • ip地址怎么查找(ipdizhi)(监控ip地址怎么查找)

    ip地址怎么查找(ipdizhi)(监控ip地址怎么查找)

  • ipad2021重量(ipad2021重量多少克)

    ipad2021重量(ipad2021重量多少克)

  • 小米手表color2支持nfc吗(小米手表Color2支持匹配苹果手机吗)

    小米手表color2支持nfc吗(小米手表Color2支持匹配苹果手机吗)

  • 华为平板横屏竖屏设定(华为平板横屏竖屏设置不同壁纸)

    华为平板横屏竖屏设定(华为平板横屏竖屏设置不同壁纸)

  • 央视频怎么看回看(央视频怎么看回放卫视)

    央视频怎么看回看(央视频怎么看回放卫视)

  • 精影显卡怎么样(精影显卡怎么样 知乎)

    精影显卡怎么样(精影显卡怎么样 知乎)

  • 荣耀30pro支持freebuds3骨声纹的吗(荣耀30PRO支持北斗导航功能)

    荣耀30pro支持freebuds3骨声纹的吗(荣耀30PRO支持北斗导航功能)

  • 苹果手机微信怎么设置不显示内容(苹果手机微信怎么设置密码锁)

    苹果手机微信怎么设置不显示内容(苹果手机微信怎么设置密码锁)

  • 一秒语音却很长怎么操作(1秒钟的语音为什么可以播放很久)

    一秒语音却很长怎么操作(1秒钟的语音为什么可以播放很久)

  • 键盘上的英文键代表什么意思(键盘上的英文键的读法)

    键盘上的英文键代表什么意思(键盘上的英文键的读法)

  • 联想管家和联想杀毒可以删掉吗(联想管家和联想的关系)

    联想管家和联想杀毒可以删掉吗(联想管家和联想的关系)

  • 华为体脂秤wifi版配对失败原因(华为体脂秤wifi版可以用热点吗)

    华为体脂秤wifi版配对失败原因(华为体脂秤wifi版可以用热点吗)

  • med-al00是华为什么型号手机(med-al00是华为什么型号畅享10e拆机)

    med-al00是华为什么型号手机(med-al00是华为什么型号畅享10e拆机)

  • iphone小黑点怎么设置(iphone小黑点怎么设置快速截屏)

    iphone小黑点怎么设置(iphone小黑点怎么设置快速截屏)

  • 蓝牙耳机怎么强制关机(蓝牙耳机怎么强制开机键)

    蓝牙耳机怎么强制关机(蓝牙耳机怎么强制开机键)

  • 小红书一直闪退怎么回事(小红书一直闪退打不开)

    小红书一直闪退怎么回事(小红书一直闪退打不开)

  • 光纤猫信号灯闪烁红色(光纤猫信号灯闪红灯)

    光纤猫信号灯闪烁红色(光纤猫信号灯闪红灯)

  • 快手提现一直显示处理中(快手提现一直正在处理什么情况)

    快手提现一直显示处理中(快手提现一直正在处理什么情况)

  • ipad一共有多少版本(ipad一共有多少个系列)

    ipad一共有多少版本(ipad一共有多少个系列)

  • 为什么苹果xr总是没有信号(为什么苹果xr总是退卡怎么回事)

    为什么苹果xr总是没有信号(为什么苹果xr总是退卡怎么回事)

  • word文档改不了数字(word文档改不了行间距是怎么回事)

    word文档改不了数字(word文档改不了行间距是怎么回事)

  • 优活手环能设置成中文吗(优活手环设置中文)

    优活手环能设置成中文吗(优活手环设置中文)

  • 淘宝未读什么情况(淘宝的未读是真的吗)

    淘宝未读什么情况(淘宝的未读是真的吗)

  • 息屏挂机是什么意思

    息屏挂机是什么意思

  • windows许可证即将过期怎么激活(windows许可证即将过期是怎么回事)

    windows许可证即将过期怎么激活(windows许可证即将过期是怎么回事)

  • 爱奇艺为什么无法下载1080P(爱奇艺为什么无法播放)

    爱奇艺为什么无法下载1080P(爱奇艺为什么无法播放)

  • 任务栏图标调大小教程(任务栏图标调大了怎么办)

    任务栏图标调大小教程(任务栏图标调大了怎么办)

  • 一般纳税人开普票税率是3%还是13%
  • 所得税减免会计分录
  • 车辆购置税计入成本吗
  • 房地产企业成本包括哪些
  • 个体工商户税务申报一年几次
  • 利润表中的资产减值损失包括哪些
  • 应收保险公司赔款计入
  • 以前年度损益调整在借方是什么意思
  • 法人股东分红交什么税
  • 未出资到位的股东
  • 企业注销了,报表的银行存款还有余额
  • 预售 首付
  • 小规模纳税人应纳税额减征额怎么算
  • 融资性售后回租和融资租赁的区别
  • 什么凭证需要审计报告
  • 资产负债率是什么之比
  • 小微企业如何备案
  • 长期股权投资减值的判断依据
  • 小企业补贴收入怎么做账
  • 中国的农业成本为什么高
  • 事业单位年末预算会计货币资金在贷方有余额对吗
  • 无法卸载系统更新 backup
  • 电脑隐藏软件图标快捷键
  • 折扣返利怎么做会计分录
  • 非货币性资产交换的会计处理
  • 国家减免税收
  • linux桌面不见了
  • 手工明细分类账本怎么记
  • 公积金提取条件和标准
  • 商企预提待付费什么意思
  • 应收债权与应付债务
  • 进项税额资产还是负债
  • php判断语句
  • 房地产预缴所得税计算公式
  • 集团公司对子公司的内部审计
  • 供应商退回多余货款账户可以是打款账号吗
  • 财政零余额账户是什么
  • 帝国cms教程官方完整版
  • 文章初审过了
  • 企业购房怎么贷款
  • mongorepository排序
  • 合并报表存货的计税基础
  • mysql中You can’t specify target table for update in FROM clause错误解决方法
  • 一般纳税人也会被税吗
  • 成品油发票抵扣进项税
  • 办公楼的装修费用如何进行财税处理
  • 企业录用失业人员补贴
  • 先付款后开票还是先开票后付款
  • 所得税费用的确认分录
  • 增值税相关的问题
  • 母公司与子公司关系
  • 主营业务成本账户年终结转后
  • 购入一辆运输汽车,价值5.6万元,款项尚未支付
  • 如何监测和优化电池寿命
  • mssql server 2012(SQL2012)各版本功能对比
  • xp系统如何添加启动项
  • Mac上Parallels Desktop共享虚拟机怎么设置 Mac上Parallels Desktop共享虚拟机设置步
  • win8右下角
  • xp局域网文件共享设置
  • rsrcmtr.exe - rsrcmtr是什么进程 有什么用
  • win7取消还原
  • win8使用教程和技能
  • 简单谈谈你的入党动机
  • python 邻接表
  • js怎么检查错误
  • javaScript NameSpace 简单说明介绍
  • javascript的描述
  • MaterialCheckBox
  • unity更新下载文件
  • linux ssh 安装
  • javascript开关
  • jquery easyui从零开始学pdf
  • centos7如何安装
  • 供电局发票是什么样子的
  • 济南税务稽查局人员名单
  • 智行火车票电子报销凭证
  • oppo纳税额
  • 内蒙古包头税务局客服电话
  • 成都市青羊区国有资产监督管理办公室
  • oecd是什么意思的缩写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设