HTMLのテーブルの要素を消したり薄くしたりするCSSは(Safari除く)

テーブルの要素を消して詰めるには

世間的には要素を非表示にするときに「display: none;visibility: hidden;」を使うようですね(例:【CSS】非表示にするならどっち?display:noneとvisibility:hiddenの違い | BeGeek)。が、テーブルの行であれば visibility: collapse; というのがかなり使えるようです。原理的にはコストがかからないようなので速いのではないでしょうか。

2019/2/25夜追記

残念なことに Safari1 では visibility: collapse;visibility: hidden; と同じになってしまい、行の表示が詰められませんでしたorz

collapse
  • <table> の行、列、列グループ、行グループでは、行や列が不可視になり、 (表の列や行に display: none が適用された場合のように) 占めていた領域も除去されます。しかし、他の行や列の寸法は、不可視になった行や列のセルが存在するときのように計算されます。この値は表全体の幅や高さを強制的に再計算することなく、すばやく行や列を不可視にすることができます
  • その他の要素では、 collapsehidden と同じと扱われます。

visibility - CSS: カスケーディングスタイルシート | MDN(下線は引用者追加)

上にも書きましたが、いちおう再度書きます。行要素 <tr> を非表示にするときにコストが低そうですが、他の要素では特に意味が無さそうです。

サンプルをこちらに載せています。

要素を薄く表示するには

文字も背景色も普段より薄く表示してみたいなあ、と思ったときにいちいち文字と背景色の値を変更するのは面倒。ということでまとめて薄く表示させるのは opacity プロパティを使います。

CSSopacity プロパティは、要素の透明度、または要素の裏にあるコンテンツが見える度合いを設定します。

opacity - CSS: カスケーディングスタイルシート | MDN

引数は0以上1以下です。つまり opacity: 1; とか opacity: 0.6; などのように書きます。

サンプルをこちらに載せています。

テーブルの要素を消す例

サンプルとして2018年度気になる展覧会その4(冬編) - 子子子子子子(ねこのここねこ)はてブロ部のテーブルを使います。なおブラウザは「Chrome バージョン: 71.0.3578.98(Official Build) (64 ビット)」です。

行要素 <tr> を非表示にする場合

王羲之書法の残影―唐時代への道程―」の行を取り扱います。

  • オリジナル

f:id:riocampos:20190225160839p:plain:w500

  • display: none;

指定した行が詰められています。完全に消えてしまって、位置表示もされませんね。

f:id:riocampos:20190225160901p:plain:w500

  • visibility: hidden;

行が存在した場所が空白として空きます。

f:id:riocampos:20190225160955p:plain:w500 f:id:riocampos:20190225161003p:plain:w500

  • visibility: collapse;

display:none; のように行が詰められていますが、存在した位置は表示されます。

f:id:riocampos:20190225161013p:plain:w500

単一要素 <td> を非表示にする場合

  • オリジナル

f:id:riocampos:20190225165728p:plain:w500

  • display: none;

指定した要素が消え、右にあった要素が左へ詰められています。完全に消えてしまって、位置表示もされませんね。

f:id:riocampos:20190225170503p:plain:w500

  • visibility: hidden;

指定した要素が表示されません。この例では下の枠線が消えてしまい、真下の要素が縦に伸びたように見えます。

f:id:riocampos:20190225170602p:plain:w500 f:id:riocampos:20190225165815p:plain:w500

  • visibility: collapse;

指定した要素が表示されません。visibility:hidden; と同じ表示になっています。

f:id:riocampos:20190225170231p:plain:w500 f:id:riocampos:20190225170210p:plain:w500

行要素 <tr> を薄く表示する例

やはり「王羲之書法の残影―唐時代への道程―」の行を取り扱います。

  • opacity: 1;

オリジナルと同じです。

f:id:riocampos:20190225172732p:plain:w500

  • opacity: 0.5;

半分の濃度。わりと薄くなります。

f:id:riocampos:20190225172750p:plain:w500

  • opacity: 0.1;

かなり読みづらいです。

f:id:riocampos:20190225172806p:plain:w500


  1. macOSSafari バージョン12.0.3 (12606.4.5.3.1) 及び iOSSafariiOS 12.1.4)にて確認