位置: 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使用入门教程)

  • 税差理论名词解释
  • 企业所得税的计算公式
  • 什么公司可以开普票
  • 定额扣除个税什么意思
  • 营业外收入做销项税调整
  • 私对公转账可以撤回吗
  • 出口退税业务提醒信息包括哪些
  • 以股东投资为基础
  • 延迟付款确认是怎么回事
  • 公司购买商业险多少钱
  • 会计档案的概念和内容
  • 单位给员工上的商业险是什么
  • 已经入账的发票能把原始票据退回吗
  • 以旧换新要按商品价格吗
  • 变更税务登记证法人需要哪些资料
  • 转账支票存根属于银行回单吗
  • 税务机关核定征收契税
  • 广告公司确认收入怎么写
  • 购入土地建厂房要交的税
  • Mac怎么禁用icloud
  • 苹果电脑开机声音怎么关
  • 库存商品赠送会计分录
  • 小规模餐饮企业增值税申报表填写
  • 没有以前年度损益调整怎么办
  • linux的使用场合
  • 中投公司投资的股票
  • 生产性生物资产和消耗性生物资产有什么区别
  • 编制竣工决算的主要依据
  • Dardanup郡的小矮人村,澳大利亚 (© Amanda Hughes/Alamy)
  • 可抵扣的费用
  • PHP:jdtojewish()的用法_日历函数
  • css如何设置渐变色
  • php_fpm
  • laravel实战教程
  • 竣工结算与竣工决算的主要区别是什么
  • 房地产企业土地使用税纳税义务终止
  • 图片格式转换pdf
  • 利用html css javascript做一个网页
  • php页面跳转可以用header
  • 罚款是否需要开证明
  • 帝国cms使用手册
  • Parcel 中文文档 | Parcel 中文网
  • 货代一般一个柜利润多少
  • 免税农产品有哪些类型
  • 企业支付股利属于由( )引起的财务活
  • 发票种类8种分别是
  • 如何判断有无运费险
  • 归还股东投资款本息怎么做账
  • 农业种植补贴需要审批吗
  • 当月未开票收入八百万
  • 设计费用计入什么会计科目
  • 企业账户里的政府账户
  • 转让专利权的使用权
  • 工程设计费收入在所得税申报表应填入
  • 发票税率如何填写
  • 明细账填制要求
  • mysql char函数
  • 远程删除
  • win10快速切换到桌面快捷键
  • 右下角小喇叭调不了声音
  • dotnetfx35
  • ubuntu20.04问题
  • linux链接分为什么和什么
  • linux小技巧
  • windowsxp的主要特点是什么
  • islp2sta.exe - islp2sta是什么进程 有什么作用
  • unity开发游戏教程
  • python 多线程调用
  • unity3d 游戏开发 消息通信
  • td nowrap css nowrap使用说明于注意事项
  • linux归档文件什么意思
  • shell脚本怎么写循环
  • android studio 无法解析 aar
  • android下的单元测试要配置以下说法不正确的是
  • 力所能及之处,定当竭尽所能
  • duck有鸭肉的意思吗
  • 代收的款项支付需不需要开发票
  • 河南省国家税务局官网
  • 生活费需要缴纳什么税
  • 养老机构范畴
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设