JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSのempty-cellsプロパティの使い方を解説

empty-cellsプロパティとは

CSSのempty-cellsプロパティは、テーブル内のセルが空の場合に、そのセルのボーダー（枠線）を表示するかどうかを指定するプロパティです。中身が何も入っていないセルに対して、枠線を見せるか隠すかを細かく制御できます。

なお、このプロパティが有効になるのは、テーブルにborder-collapse: separate;が指定されている場合のみです。border-collapse: collapse;を指定した場合は効果が現れないので注意しましょう。

指定できる3つの値

empty-cellsプロパティには、次の3つの値を指定できます。

  • show … 空のセルにもボーダーを表示します（初期値）
  • hide … 空のセルのボーダーを非表示にします
  • inherit … 親要素の設定値を継承します

使用例

以下のサンプルコードでは、テーブルにempty-cells: hide;を指定しています。そのため、2行目の最後にある内容が空のセルは、ボーダーが表示されません。

<html>
   <head>
      <style>
         table.empty{
            width:400px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.empty{
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
      </style>
   </head>
   <body>
      <table class = "empty">
         <tr>
            <th></th>
            <th>Title one</th>
            <th>Title two</th>
         </tr>
         <tr>
            <th>Row Title</th>
            <td class = "empty">R1T1</td>
            <td class = "empty">R1T2</td>
         </tr>
         <tr>
            <th>Row Title</th>
            <td class = "empty">R2T1</td>
            <td class = "empty"></td>
         </tr>
      </table>
   </body>
</html>

  1. CSSのborder-left-widthプロパティで左ボーダーの幅を指定する方法

    CSSのborder-left-widthプロパティは、要素の左側の境界線（ボーダー）の太さを変更するために使用します。このプロパティを使うことで、左ボーダーだけの幅を個別に調整できます。使用例以下のコードは、border-left-widthプロパティを実装した実際の例です。<html>    <head>    </head>    <body>       <p style = "border-left-width:6px;border

  2. CSSのlist-style-typeプロパティでリストの行頭記号を自由に変更する方法

    CSSのlist-style-typeプロパティを使用すると、リスト項目の先頭に表示されるマーカー(行頭記号)の形状や見た目を自由にコントロールできます。デフォルトの黒丸(disc)だけでなく、白丸や四角、数字、アルファベットなど、さまざまなスタイルを指定できるのが特徴です。 list-style-typeの主な値 disc:黒丸(初期値) circle:白丸(中抜きの丸) square:塗りつぶしの四角形 decimal:算用数字(1、2、3...) lower-alpha:小文字アルファベット(a、b、c...) upper-alpha:大文字アルファベット(A、B、C...) none