項(xiàng)目改造中遇到DIV+CSS實(shí)現(xiàn)的table，新需求需要在表格使用單元格合并，網(wǎng)上調(diào)查返現(xiàn)CSS display:table實(shí)現(xiàn)的table表格，沒有單元格的屬性和樣式，經(jīng)過一番思考，曲折現(xiàn)實(shí)了單元格的合并，即采用正行嵌套一個(gè)單獨(dú)的display:table的DIV，然后在嵌套的表格DIV內(nèi)部通過控制行列數(shù)和行列的高度，實(shí)現(xiàn)單元格合并。個(gè)人建議全新實(shí)現(xiàn)使用<table> HTML標(biāo)簽即可

一、CSS display屬性的表格布局相關(guān)屬性的解釋：

table    此元素會(huì)作為塊級(jí)表格來顯示（類似 <table>），表格前后帶有換行符。
table-row-group    此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示（類似 <tbody>）。
table-header-group    此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示（類似 <thead>）。
table-footer-group    此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示（類似 <tfoot>）。
table-row    此元素會(huì)作為一個(gè)表格行顯示（類似 <tr>）。
table-column-group    此元素會(huì)作為一個(gè)或多個(gè)列的分組來顯示（類似 <colgroup>）。
table-column    此元素會(huì)作為一個(gè)單元格列顯示（類似 <col>）
table-cell    此元素會(huì)作為一個(gè)表格單元格顯示（類似 <td> 和 <th>）
table-caption    此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似 <caption>）

二、示例代碼

1、普通表格

運(yùn)行效果

2、列合并實(shí)現(xiàn)表格

實(shí)現(xiàn)思路：基于display:table的表格實(shí)現(xiàn)，沒有<table>的rowspan和colspan單元格合并的實(shí)現(xiàn)，所以曲折實(shí)現(xiàn)，將表格每行單獨(dú)嵌套一個(gè)獨(dú)立的表格，這樣在嵌套的獨(dú)立表格內(nèi)部，單元格合并就能通過控制嵌套表格的行數(shù)和列數(shù)以及單元格的寬高來實(shí)現(xiàn)

運(yùn)行效果

3、行合并表格

行合并的實(shí)現(xiàn)思路：與列合并的實(shí)現(xiàn)思路類似，將有單元格合并的列單獨(dú)嵌套一個(gè)display為table的DIV，高度=單行高*單元格合并數(shù)目的倍數(shù)，同行的其他列同樣均單獨(dú)嵌套DIV，實(shí)例代碼如下

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助

原文：http://www.cnblogs.com/haoqipeng/p/5309491.html