CSS合并单元格四种方式：table/display/flex/grid |
您所在的位置：网站首页 › 网页合并单元格属性 › CSS合并单元格四种方式：table/display/flex/grid |
CSS合并单元格四种方式：table/display/flex/grid
|
目录 方式一：table【最简单写法】 方式二：display: table--不推荐 方式三：display: flex 方式四：display: grid 效果图：
通过table的colspan和rowspan轻松实现单元格合并。 边框设置：th/td 加右下边框，table加左上边框。 种类 名称 描述 水果 香蕉 香蕉（学名：Musa nana Lour.）是芭蕉科、芭蕉属植物。植株丛生，具匐匍茎，矮型的高3.5米以下，一般高不及2米... 苹果 苹果（Malus pumila Mill.），是落叶乔木，通常树木可高至15米，但栽培树木一般只高3-5米左右... 其他 -- 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; } 方式二：display: table--不推荐外层div.distable设置样式display: table; 内层div.distable-cell*设置样式display: table-cell; table布局下，可以实现合并单元格效果。有两点说明: 1）为合并单元格的行 设置边框时，比较复杂，容易错位。 2）浏览器缩放到200+%展示时，此布局会变形。 因此，这种写法并不推荐。 种类 名称 描述 水果 香蕉 香蕉（学名：Musa nana Lour.）是芭蕉科、芭蕉属植物。植株丛生，具匐匍茎，矮型的高3.5米以下，一般高不及2米... 苹果 苹果（Malus pumila Mill.），是落叶乔木，通常树木可高至15米，但栽培树木一般只高3-5米左右... 其他 -- .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; } 方式三：display: flexflex布局下，可以实现合并单元格效果。有两个难点: 1）合并单元格的垂直居中效果：flex布局嵌套，内层的flex设置align-items: center; 2）边框的设置：设置比较复杂，容易错位。 虽然可以实现合并单元格效果，并不推荐。 种类 名称 描述 水果 香蕉 香蕉（学名：Musa nana Lour.）是芭蕉科、芭蕉属植物。植株丛生，具匐匍茎，矮型的高3.5米以下，一般高不及2米... 苹果 苹果（Malus pumila Mill.），是落叶乔木，通常树木可高至15米，但栽培树木一般只高3-5米左右... 其他 -- .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; } 方式四：display: gridgrid布局学习成本会高一些，但代码看着最清晰。 grid有兼容性问题，谨慎使用。
总结： table布局仍是实现合并单元格最简单的方式，grid次之，flex再次，display:table不推荐。 The End |
【本文地址】
今日新闻 |
推荐新闻 |