CSS合并單元格四種方式示例詳解(table/display/flex/grid)
發(fā)布時間：2024-02-28 16:53:45 作者：月上初小 
我要評論
我要評論這篇文章主要介紹了CSS合并單元格四種方式：table/display/flex/grid,table布局仍是實現(xiàn)合并單元格最簡單的方式，grid次之，flex再次，display:table不推薦，本文結(jié)合實例代碼介紹的非常詳細，需要的朋友可以參考下
效果圖：
方式一：table【最簡單寫法】
- colspan：規(guī)定單元格可橫跨的列數(shù)。
- rowspan：規(guī)定單元格可橫跨的行數(shù)。
通過table的colspan和rowspan輕松實現(xiàn)單元格合并。
邊框設(shè)置：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>香蕉（學(xué)名：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設(shè)置樣式display: table;
內(nèi)層div.distable-cell*設(shè)置樣式display: table-cell;
table布局下，可以實現(xiàn)合并單元格效果。有兩點說明:
1）為合并單元格的行 設(shè)置邊框時，比較復(fù)雜，容易錯位。
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">香蕉（學(xué)名：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布局下，可以實現(xiàn)合并單元格效果。有兩個難點:
1）合并單元格的垂直居中效果：flex布局嵌套，內(nèi)層的flex設(shè)置align-items: center;
2）邊框的設(shè)置：設(shè)置比較復(fù)雜，容易錯位。
雖然可以實現(xiàn)合并單元格效果，并不推薦。
<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>香蕉（學(xué)名：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布局學(xué)習(xí)成本會高一些，但代碼看著最清晰。
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>香蕉（學(xué)名：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>總結(jié)：
table布局仍是實現(xiàn)合并單元格最簡單的方式，grid次之，flex再次，display:table不推薦。
到此這篇關(guān)于CSS合并單元格四種方式：table/display/flex/grid的文章就介紹到這了,更多相關(guān)CSS合并單元格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS合并單元格四種方式示例詳解(table/display/flex/grid)
這篇文章主要介紹了CSS合并單元格四種方式：table/display/flex/grid,table布局仍是實現(xiàn)合并單元格最簡單的方式，grid次之，flex再次，display:table不推薦，本文結(jié)合實例2024-02-28- 連續(xù)的數(shù)字和英文字符常常將容器撐大，挺讓人頭疼。下面與大家分享下CSS如何實現(xiàn)換行的方法，從事web前端的朋友可以看看哦2014-10-17
css table-layout屬性顯示表格單元格、行、列的算法規(guī)則
之所以拿出這個來說事，是因為看到一篇文章Tips for Authoring Fast-loading HTML Pages，提到了table-layout,本文詳細介紹tableLayout 屬性算法規(guī)則，需要了解的朋友可以2012-12-12- 通過我們在單元格中顯示文本時，若內(nèi)容過多而導(dǎo)致?lián)Q行或撐寬單元格，下面是我在網(wǎng)上找的一個解決方法，共享一下，希望對大家有用2009-12-12
CSS對表格單元格強制換行和不換行-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
CSS控制Table單元格強制換行與強制不換行 我們知道Div的換行和不換行的css寫法。但對于表格單元格只知道一個屬性nowrap可以使其不換行。 近日有此需要，但發(fā)2008-10-17
