碼上快樂

相關內容    簡體    繁體

使用div實現table效果

本文轉載自   查看原文   2017-04-05 13:54   20533    web前端

  1. 項目改造中遇到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、普通表格

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

2、列合並實現表格

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

  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;}   
  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%;">各省／直轄市GDP平均增長率</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、行合並表格

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

 

  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;}   
  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%;">各省／直轄市GDP平均增長率</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>   


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 DIV實現CSS 的placeholder效果 jQuery實現div滑動效果 DIV懸浮效果實現 實現一個div的拖拽效果 【vue】使用el-table時，實現批量選中效果 DIV+CSS實現FRAMESET效果 HTML 通過js實現div的拖動效果 實現卡片效果【DIV+CSS3】 利用div實現遮罩層效果 用JavaScript實現div的鼠標拖拽效果
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM