項目改造中遇到DIV+CSS實現的table，新需求需要在表格使用單元格合并，網上調查返現CSS display:table實現的table表格，沒有單元格的屬性和樣式，經過一番思考，曲折現實了單元格的合并，即采用正行嵌套一個單獨的display:table的DIV，然后在嵌套的表格DIV內部通過控制行列數和行列的高度，實現單元格合并。個人建議全新實現使用<table> HTML標簽即可

一、CSS display屬性的表格布局相關屬性的解釋：

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

二、示例代碼

1、普通表格

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表