[16-4] table のセルの枠線を非表示にしよう(CSS使用 (empty-cells))

最終更新日:2015年12月24日  (初回投稿日:2011年06月27日)

CSSでtableの空のセル(=テキスト等のデータが無い)の 枠線や背景を非表示にする事ができます。
CSSの「empty-cells」プロパティ使います。

このように↓ table のセル(th td)の枠線を非表示にしてスッキリさせよう。
(これは↓プレビュー画像です。クリックでサンプルが別ウィンドウで開きます)

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

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

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

サンプルのダウンロードはこちら

★上のサンプル画像をクリックすると HTMLファイルが開きます。(前回と同じサンプルです)
★下記からHTMLとCSSファイル一式をzipでダウンロードできます。
→本日のサンプル(sample16-3set.zip (3k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

CSSでempty-cellsを指定しよう

サンプルのCSSを見てみましょう。要所以外は省略してます。
(CSSの全体は、サンプルページの一番下から開けます)

table.sample2 {
	border: 1px solid #ccc;
}
table.sample2 tr td {
	border: 1px solid #ccc;
}
table.sample2 tr td {
	empty-cells:hide;
}

<td>要素にempty-cells:hide と指定する事で、自動的に空の <td>要素の枠線や背景を非表示にできます。たったこれだけw
空じゃない中身があるセルはちゃんと表示されています。

empty-cellsプロパティは、<td> だけでなく <th>要素にも効きます。

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

次回予告

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

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

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2017/09 | 10
- - - - - 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.