ホームページ > 記事 > ウェブフロントエンド > CSS属性表示に基づくテーブルレイアウトの使用:table_html/css_WEB-ITnose
CSS属性表示に基づくテーブルレイアウトの使用:table_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:23:09962ブラウズ
プロジェクトの変換中に、DIV+CSS によって実装されたテーブルに遭遇しました。新しい要件では、テーブル内でセルの結合を使用する必要がありました。CSS の display:table によって実装されたテーブルにはセルの属性とスタイルが含まれていないことがわかりました。調べてみると、セルの結合は紆余曲折、つまり最前列に別のdisplay:table DIVを入れ子にし、行数と行数を制御することでセルの結合を実現しているようです。ネストしたテーブル DIV 内の行数と行の高さ。個人的には、新しい実装には f5d188ed2c074f8b944552db028f98a1 HTML タグを使用することをお勧めします
1. CSS 表示属性のテーブル レイアウト関連属性の説明:
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 に基づくテーブルの実装には、f5d188ed2c074f8b944552db028f98a1 の 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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。