欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS display屬性的table表格布局

  發(fā)布時間：2016-03-25 11:12:20   作者：MySomeDay   我要評論
這篇文章主要為大家詳細(xì)介紹了基于CSS屬性display：table的表格布局的使用，即CSS display屬性的table表格布局，感興趣的小伙伴們可以參考一下

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

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

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    此元素會作為一個表格標(biāo)題顯示（類似 <caption>）

二、示例代碼

1、普通表格

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>display普通表格</title>  
  6. <style type="text/css">  
  7. .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋體, Helvetica, sans-serif;}   
  8. .table {display: table; width: 80%; border-collapse: collapse;}   
  9. .table-tr {display: table-row; height: 30px;}   
  10. .table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}   
  11. .table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}   
  12. </style>  
  13. </head>  
  14. <body>  
  15.     <div class="table">  
  16.         <div class="table-tr">  
  17.             <div class="table-th">省份/直轄市</div>  
  18.             <div class="table-th">GDP(億元)</div>  
  19.             <div class="table-th">增長率</div>  
  20.         </div>  
  21.         <div class="table-tr">  
  22.             <div class="table-td">廣東</div>  
  23.             <div class="table-td">72812</div>  
  24.             <div class="table-td">8.0%</div>  
  25.         </div>  
  26.         <div class="table-tr">  
  27.             <div class="table-td">河南</div>  
  28.             <div class="table-td">37010</div>  
  29.             <div class="table-td">8.3%</div>  
  30.         </div>  
  31.         <div class="table-tr">  
  32.             <div class="table-td">江蘇</div>  
  33.             <div class="table-td">70116</div>  
  34.             <div class="table-td">8.5%</div>  
  35.         </div>  
  36.     </div>  
  37. </body>  
  38. </html>   

運行效果

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>基于display列合并表格</title>  
  6. <style type="text/css">  
  7. .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋體, Helvetica, sans-serif;}   
  8. .table {display: table; width: 80%; border-collapse: collapse;}   
  9.   
  10. .table-tr {display: table-row; height: 30px;}   
  11. .table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}   
  12. .table-td {display: table-cell; height: 100%;}   
  13.   
  14. .sub-table {width: 100%;height: 100%;display: table;}   
  15. .sub-table-tr {display: table-row; height: 100%;}   
  16. .sub-table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}   
  17.   
  18. </style>  
  19. </head>  
  20. <body>  
  21.   
  22. <div class="table">  
  23.     <div class="table-tr">  
  24.         <div class="table-td">  
  25.             <div class="sub-table">  
  26.                 <div class="sub-table-tr">  
  27.                     <div class="table-th" style="width: 40%;">省份／直轄市</div>  
  28.                     <div class="table-th" style="width: 30%;">GDP(億元)</div>  
  29.                     <div class="table-th" style="width: 30%;">增長率</div>  
  30.                 </div>  
  31.             </div>  
  32.         </div>  
  33.     </div>  
  34.     <div class="table-tr">  
  35.         <div class="table-td">  
  36.             <div class="sub-table">  
  37.                 <div class="sub-table-tr">  
  38.                     <div class="sub-table-td" style="width: 40%;">廣東</div>  
  39.                     <div class="sub-table-td" style="width: 30%;">72812</div>  
  40.                     <div class="sub-table-td" style="width: 30%;">8.0%</div>  
  41.                 </div>  
  42.             </div>  
  43.         </div>  
  44.     </div>  
  45.     <div class="table-tr">  
  46.         <div class="table-td">  
  47.             <div class="sub-table">  
  48.                 <div class="sub-table-tr">  
  49.                     <div class="sub-table-td" style="width: 40%;">河南</div>  
  50.                     <div class="sub-table-td" style="width: 30%;">37010</div>  
  51.                     <div class="sub-table-td" style="width: 30%;">8.3%</div>  
  52.                 </div>  
  53.             </div>  
  54.         </div>  
  55.     </div>  
  56.     <div class="table-tr">  
  57.         <div class="table-td">  
  58.             <div class="sub-table">  
  59.                 <div class="sub-table-tr">  
  60.                     <div class="sub-table-td" style="width: 40%;">江蘇</div>  
  61.                     <div class="sub-table-td" style="width: 30%;">70116</div>  
  62.                     <div class="sub-table-td" style="width: 30%;">8.5%</div>  
  63.                 </div>  
  64.             </div>  
  65.         </div>  
  66.     </div>  
  67.     <div class="table-tr">  
  68.         <div class="table-td">  
  69.             <div class="sub-table">  
  70.                 <div class="sub-table-tr">  
  71.                     <div class="sub-table-td" style="width: 70%;">各?。陛犑蠫DP平均增長率</div>  
  72.                     <div class="sub-table-td" style="width: 30%;">8.26%</div>  
  73.                 </div>  
  74.             </div>  
  75.         </div>  
  76.     </div>  
  77. </div>  
  78. </body>  
  79. </html>  

運行效果

3、行合并表格

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>基于display的行合并表格</title>  
  6. <style type="text/css">  
  7. .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋體, Helvetica, sans-serif;}   
  8. .table {display: table; width: 80%; border-collapse: collapse;}   
  9.   
  10. .table-tr {display: table-row; height: 30px;}   
  11. .table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}   
  12. .table-td {display: table-cell; height: 100%;}   
  13.   
  14. .sub-table {width: 100%;height: 100%;display: table;}   
  15. .sub-table-tr {display: table-row; height: 100%;}   
  16. .sub-table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}   
  17.   
  18. </style>  
  19. </head>  
  20. <body>  
  21.   
  22. <div class="table">  
  23.     <div class="table-tr">  
  24.         <div class="table-td">  
  25.             <div class="sub-table">  
  26.                 <div class="sub-table-tr">  
  27.                     <div class="table-th" style="width: 40%;">省份／直轄市</div>  
  28.                     <div class="table-th" style="width: 30%;">GDP(億元)</div>  
  29.                     <div class="table-th" style="width: 30%;">增長率</div>  
  30.                 </div>  
  31.             </div>  
  32.         </div>  
  33.     </div>  
  34.     <div class="table-tr">  
  35.         <div class="table-td">  
  36.             <div class="sub-table">  
  37.                 <div class="sub-table-tr">  
  38.                     <div class="sub-table-td" style="width: 40%;">廣東</div>  
  39.                     <div class="sub-table-td" style="width: 30%;">72812</div>  
  40.                     <div class="sub-table-td" style="width: 30%;">8.0%</div>  
  41.                 </div>  
  42.             </div>  
  43.         </div>  
  44.     </div>  
  45.     <div class="table-tr" style="height:60px;">  
  46.         <div class="table-td">  
  47.             <div class="sub-table">  
  48.                 <div class="sub-table-tr">  
  49.                     <div class="sub-table-td" style="width: 40%; border: none;">  
  50.                         <div class="sub-table">  
  51.                             <div class="sub-table-tr" style="height:50%;">  
  52.                                 <div class="sub-table-td" style="width: 100%; height:50%;">  
  53.                                     河南   
  54.                                 </div>  
  55.                             </div>  
  56.                             <div class="sub-table-tr" style="height:50%;">  
  57.                                 <div class="sub-table-td" style="width: 100%; height:50%;">  
  58.                                     江蘇   
  59.                                 </div>  
  60.                             </div>  
  61.                         </div>  
  62.                     </div>  
  63.                     <div class="sub-table-td" style="width: 30%;border: none;">  
  64.                         <div class="sub-table">  
  65.                             <div class="sub-table-tr" style="height:50%;">  
  66.                                 <div class="sub-table-td" style="width: 100%; height:50%;">  
  67.                                     37010   
  68.                                 </div>  
  69.                             </div>  
  70.                             <div class="sub-table-tr" style="height:50%;">  
  71.                                 <div class="sub-table-td" style="width: 100%; height:50%;">  
  72.                                     70116   
  73.                                 </div>  
  74.                             </div>  
  75.                         </div>  
  76.                        
  77.                     </div>  
  78.                        
  79.                     <div class="sub-table-td" style="width: 30%;border: none;">  
  80.                         <div class="sub-table">  
  81.                             <div class="sub-table-tr">  
  82.                                 <div class="sub-table-td" style="width: 100%;">  
  83.                                     8.4%   
  84.                                 </div>  
  85.                             </div>  
  86.                         </div>  
  87.                     </div>  
  88.                 </div>  
  89.             </div>  
  90.         </div>  
  91.     </div>  
  92.     <div class="table-tr">  
  93.         <div class="table-td">  
  94.             <div class="sub-table">  
  95.                 <div class="sub-table-tr">  
  96.                     <div class="sub-table-td" style="width: 70%;">各?。陛犑蠫DP平均增長率</div>  
  97.                     <div class="sub-table-td" style="width: 30%;">8.26%</div>  
  98.                 </div>  
  99.             </div>  
  100.         </div>  
  101.     </div>  
  102. </div>  
  103. </body>  
  104. </html>   

運行效果：

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

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

相關(guān)文章

  • 基于display:table的CSS布局讓HTML元素和像table一樣

    display:table的CSS聲明能夠讓一個HTML元素和它的子節(jié)點像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產(chǎn)生因為使用了
    2012-12-07

  • 關(guān)于CSS中的display:table-cell使用技巧的幾種應(yīng)用

    display:table-cell屬性指讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)，類似于td標(biāo)簽。目前IE8+以及其他現(xiàn)代瀏覽器都是支持此屬性的，但是IE6/7只能對你說sorry了,本文將詳細(xì)介紹，
    2012-12-07

  • css display table 自適應(yīng)高度、寬度問題的解決

    這篇文章主要介紹了css display table 自適應(yīng)高度、寬度問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著
    2021-05-07

最新評論