[16-4] tableのセルの枠線を非表示にしよう(empty-cellsプロパティ)

最終更新日:2017年10月31日  (初回投稿日:2011年06月27日)

今回は、CSSの empty-cellsプロパティを使います。
これは、<table>上の 空のセル( = テキスト等のデータが無い)の 枠線や背景を非表示にする事ができます。
これは、超簡単で便利なので、ぜひ覚えておこう。

このようにスッキリします。

8月
sun mon tue wed thu fri sat
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

何もしていない状態はこれ↓

8月
sun mon tue wed thu fri sat
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

何もテキストが入っていないセルに枠線があると邪魔なので、非表示にします。

CSSプロパティと値 empty-cells:hide

2017年10月、サンプルは本文内に記載し、それに伴い本文も書き直しました。

CSSでempty-cellsを指定しよう

サンプルのHTMLを見てみましょう。カレンダーなのでちょっと長いけど。
ハイライト部分が空のセルです。

<table class="sample2">
  <tr>
    <th colspan="7">8月</th>
    </tr>
  <tr class="youbi">
    <td>sun</td>
    <td>mon</td>
    <td>tue</td>
    <td>wed</td>
    <td>thu</td>
    <td>fri</td>
    <td>sat</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
  </tr>
  <tr>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
    <td>22</td>
    <td>23</td>
  </tr>
  <tr>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
    <td>29</td>
    <td>30</td>
  </tr>
  <tr>
    <td>31</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

サンプルのCSSを見てみましょう。

table.sample2 {
	width: 100%;
	border: 1px solid #ddd;
	margin: 1em 0;
	padding: 7px;
	border-spacing:3px;
	}
table.sample2 tr th {
	text-align: center;
	font-size: 14px;
	padding: 1px;
	background: #c7ebc9;
	}
table.sample2 tr td {
	text-align: center;
	font-size: 14px;
	border: 1px solid #ddd;
	padding: 5px;
	}
table.sample2 tr.youbi td {
	font-size: 11px;
	padding: 1px;
	background: #ffc;
	border: none;
	}
table.sample2 tr td {
	empty-cells:hide;
	}

<td>要素に ただ empty-cells:hide と指定するだけ。
これで 自動的に空の <td>要素の枠線や背景を非表示にできます。
いいですねえ〜 オートマチック!

empty-cellsプロパティは、<th>要素にも使えます。セル用だからね。

「hide」の逆、表示する値は「show」。
empty-cellsプロパティにはこの「hide」と「show」の値しかありません。
showはデフォルト値なので、めったに使わないね。
empty-cellsプロパティを指定しなければ show だから)

次回予告

いかがでしたか?
超簡単に空のセルをスッキリ非表示にできる empty-cells: hide をぜひ覚えておきましょう。

次回は、テーブルの横列(<tr>)をグループ化する方法です。
表の各 <tr>要素を「ヘッダ部分」「データの部分」「フッタの部分」にわけて、CSSの指定をしやすくします。
そのためのHTML要素 <thead> <tbody> <tfoot>というのがあるんです。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.