NC3のテーブル表示をオリジナルに!

概要:ウィズウィグ・エディター編集で作成したテーブルは「表の詳細設定」を行っても、思ったようなデザインにならないと感じて、オリジナルCSSでテーブルを作成してみた。。

エディターで単にテーブルを挿入した状態

役職 氏名 固定電話 携帯電話 住所
会長 石川遼太郎 03-1234-5678 090-9876-5432 東京都世田谷区石川町1丁目1番1号
副会長 池田勇作      
副会長 今平周五郎      

上記の表の「表の詳細設定」では出来ない部分を修正した事例の紹介(列幅は自動調整)

  • No
  • 修正の内容
  • クラス名
  • 1行目に罫線を表示
  • 基本部分:tbl_def
  • 1行目のタイトルは、太字:中央揃えに
  • 基本部分:tbl_def
  • 行の高さを自由に設定したい
  • 追加部分:tbl_def_height
  • 特定の列内データを中央表示
  • 追加部分:tbl_def_center
  • 行の背景色を一定間隔で変える
  • 追加部分: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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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%;}