作成方法:比較テーブル
- 前のページ レスポンシブテーブル
- 次のページ フルスクリーンビデオ
CSSを使って比較テーブルを作成する方法を学びます。
機能 | ベーシック | プロ |
---|---|---|
サンプルテキスト | ||
サンプルテキスト | ||
サンプルテキスト | ||
サンプルテキスト | ||
サンプルテキスト |
比較テーブルの作成方法
第1段 - HTMLを追加:
<!-- Font Awesome アイコンライブラリ --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <table> <tr> <th スタイル="幅:50%">機能</th> <th>ベーシック</th> <th>プロ</th> </tr> <tr> <td>サンプルテキスト</td> <td><i class="fa fa-remove"></i></td> <td><i class="fa fa-check"></i></td> </tr> <tr> <td>サンプルテキスト</td> <td><i class="fa fa-check"></i></td> <td><i class="fa fa-check"></i></td> </tr> </table>
第2段 - CSSを追加:
/* テーブルのスタイルを設定 */ table { 境界線崩壊: 破壊; 境界線スペース: 0; 幅: 100%; 境界線: 1px 固定線 #ddd; } /* テーブルのヘッダーやデータのスタイルを設定 */ th, td { テキストアライメント: 中央; パディング: 16px; } th:first-child, td:first-child { テキストアライメント: 左; } /* 斑马纹表格行 */ tr:nth-child(even) { 背景色: #f2f2f2; } .fa-check { color: green; } .fa-remove { color: red; }
- 前のページ レスポンシブテーブル
- 次のページ フルスクリーンビデオ