NC3のテーブル表示をオリジナルに!
概要:ウィズウィグ・エディター編集で作成したテーブルは「表の詳細設定」を行っても、思ったようなデザインにならないと感じて、オリジナルCSSでテーブルを作成してみた。。
エディターで単にテーブルを挿入した状態
役職 | 氏名 | 固定電話 | 携帯電話 | 住所 |
---|---|---|---|---|
会長 | 石川遼太郎 | 03-1234-5678 | 090-9876-5432 | 東京都世田谷区石川町1丁目1番1号 |
副会長 | 池田勇作 | |||
副会長 | 今平周五郎 |
上記の表の「表の詳細設定」では出来ない部分を修正した事例の紹介(列幅は自動調整)
- No
- 修正の内容
- クラス名
- 1
- 1行目に罫線を表示
- 基本部分:tbl_def
- 2
- 1行目のタイトルは、太字:中央揃えに
- 基本部分:tbl_def
- 3
- 行の高さを自由に設定したい
- 追加部分:tbl_def_height
- 4
- 特定の列内データを中央表示
- 追加部分:tbl_def_center
- 5
- 行の背景色を一定間隔で変える
- 追加部分:tbl_def_backcolor
1と2は、基本部分CSS で、 3~5はクラスを追加して表示した例が以下です。
作成手順
1.エディターでテーブルを挿入
2.1行だけ全ての列にデータを入力(tableの自動列幅調整の利用)
これを入れないと列幅が半角スペースと狭くなり、入力し難いため。
3.tableのクラス変更やCSS記述
上記の点を入れて作成したテーブル
役職 | 氏名 | 固定電話 | 携帯電話 | 住所 |
会長 | 石川遼太郎 | 03-1234-5678 | 090-9876-5432 | 東京都世田谷区石川町1丁目1番1号 |
会計 | 池田勇作 | |||
副会長 | 今平周五郎 | |||
理事 | 深堀圭次郎 | |||
理事 | 宮本勝則 |
<-- 1行目「table class=」設定を全て以下に書換 --> <table class="tbl_def tbl_def_height tbl_def_center tbl_def_backcolor"> <tbody> <tr> <td>役職</td> <td>氏名</td> <td>固定電話</td> <td>携帯電話</td> <td>住所</td> </tr> <tr> <td>会長</td> <td>石川遼太郎</td> <td>03-1234-5678</td> <td>090-9876-5432</td> <td>東京都世田谷区石川町1丁目1番1号</td> </tr> <tr> <td>会計</td> <td>池田勇作</td> <td> </td> <td> </td> <td> </td> </tr> <!-- 中間 省略 --> </tbody> </table>
1行目に4つの「class」指定がポイントです
/* ===== CSS基本部分 ===== */ .tbl_def {border:1px solid #ccc; width: 100%; margin-bottom:10px;} .tbl_def tr:first-of-type td{ font-weight:bold; border-top: 1px solid #000; text-align:center;} .tbl_def tr:nth-of-type(n+2) td{ padding-left:5px;} /* =====高さの指定 ===== */ .tbl_def_height td{ line-height:30px;} /* =====特定列の中央寄せ ===== */ .tbl_def_center tr:nth-of-type(n+2) td:first-of-type{ padding-left:0px; text-align:center;} .tbl_def_center tr:nth-of-type(n+2) td:nth-0f-type(n+3):nth-of-type(-n+4){ padding-left:0px; text-align:center;} /* =====行に一定間隔で背景色 ===== */ .tbl_def_backcolor tr:nth-of-type(2n+3){ background-color:#ddddff;}
CSS補足説明・疑似クラス
- 1.tr:first-of-type
- 最初の行
- 2.tr:nth-of-type(n+2)
- trの2行目から最後まで
- 3.td:nth-child(n+3):nth-child(-n+4)
- 3列目から4列目まで
列幅を自由に設定したい事例・5列の場合
/* 5列均等幅 5 × %値=100以下 */ .class_name td{width:20%;}
/* CSS指定:5列全てサイズ指定5つの%値合計は100以下 */
.class_name td:first-of-type{width:5%;}
.class_name td:nth-of-type(2){width:15%;}
.class_name td:nth-of-type(3){width:20%;}
.class_name td:nth-of-type(4){width:25%;}
.class_name td:nth-of-type(5){width:35%;}
/* インラインCSS指定:1行目のtdに5列全てサイズ指定5つの%値合計は100以下 */
<td style="15%;"> /* 5列にそれぞれ設定 */
/* 1列目だけ異なり、2列目以降同じ幅 5つの%値合計は100以下 */
.class_name td:first-of-type{width:10%;}
.class_name td:nth-of-type(n+2){width:22.5%;}