CSS属性表示に基づくテーブルレイアウトの使用:table_html/css_WEB-ITnose
プロジェクトの変換中に、DIV+CSS によって実装されたテーブルに遭遇しました。新しい要件では、テーブル内でセルの結合を使用する必要がありました。CSS の display:table によって実装されたテーブルにはセルの属性とスタイルが含まれていないことがわかりました。調べてみると、セルの結合は紆余曲折、つまり最前列に別のdisplay:table DIVを入れ子にし、行数と行数を制御することでセルの結合を実現しているようです。ネストしたテーブル DIV 内の行数と行の高さ。個人的には、新しい実装には
| および | と同様) 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 に基づくテーブルの実装には、 |
|---|
