CSS属性表示に基づくテーブルレイアウトの使用:table_html/css

プロジェクトの変換中に、DIV+CSS によって実装されたテーブルに遭遇しました。新しい要件では、テーブル内でセルの結合を使用する必要がありました。CSS の display:table によって実装されたテーブルにはセルの属性とスタイルが含まれていないことがわかりました。調べてみると、セルの結合は紆余曲折、つまり最前列に別のdisplay:table DIVを入れ子にし、行数と行数を制御することでセルの結合を実現しているようです。ネストしたテーブル DIV 内の行数と行の高さ。個人的には、新しい実装には

HTML タグを使用することをお勧めします

1. CSS 表示属性のテーブルレイアウト関連属性の説明:

table この要素はブロックレベルのテーブルとして表示されます (同様に) to

)、前後に改行のある表。

table-row-group この要素は、1 つ以上の行のグループとして表示されます (

と同様)。

table-header-group この要素は、1 つ以上の行のグループとして表示されます (

と同様)。

table-footer-group この要素は、1 つ以上の行のグループとして表示されます (

と同様)。

table-row この要素はテーブル行として表示されます (

と同様)。

table-column-group この要素は、1 つ以上の列のグループとして表示されます (

と同様)。

table-column この要素はセルの列として表示されます (

と同様)

table-cell この要素は表のセルとして表示されます (

および

と同様)

table -caption この要素は表のタイトルとして表示されます (

と同様)

2. サンプルコード

1. 通常のテーブル

 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. 列のテーブルの結合

実装のアイデア: display:table に基づくテーブルの実装には、

の rowspan セルと Colspan セルを結合する実装がないため、テーブルの各行をネストしてジグザグに実装されます。これにより、ネストされた独立テーブルのセット内で、ネストされたテーブルの行数と列数、セルの幅と高さを制御することでセルの結合を実現できるようになります。実行効果

3 、行結合テーブル

行結合の実装アイデア: 列結合の実装アイデアと同様に、結合されたセルを持つ列は表示される 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;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%;">各省／直辖市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>

ログイン後にコピー

実行中。効果:

END