表の空白にさようなら！ CSSで空のセルの罫線をスマートに表示する
2024-04-06
CSSで空のセルの罫線を表示する方法
方法
- 以下のコードをHTMLファイルに追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>空のセルの罫線を表示</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>データ</td>
<td></td>
</tr>
</table>
</body>
</html>
- 上記のコードでは、
table要素にborder-collapse: collapse;プロパティを設定しています。これは、テーブルのセル間の余白をなくすために必要です。 - 次に、
td要素にborder: 1px solid black;プロパティを設定しています。これは、すべてのセルの罫線を1pxの黒線で表示します。 - 最後に、
empty-cellsプロパティを設定します。このプロパティは、空のセルの罫線を表示するかどうかを指定します。
empty-cells プロパティの値
show: 空のセルの罫線を表示します。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>空のセルの罫線を表示</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 5px;
}
/* 空のセルの罫線を表示 */
table {
empty-cells: show;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>データ</td>
<td></td>
</tr>
</table>
</body>
</html>
上記のように、empty-cells プロパティを show に設定すると、空のセルの罫線も表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>空のセルの罫線を表示</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 5px;
}
/* 空のセルの罫線を表示 */
table {
empty-cells: show;
}
</style>
</head>
<body>
<h2>空のセルの罫線を表示</h2>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td>データ</td>
<td></td>
<td>データ</td>
</tr>
<tr>
<td></td>
<td>データ</td>
<td></td>
</tr>
</table>
<h2>空のセルの罫線を表示しない</h2>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td>データ</td>
<td></td>
<td>データ</td>
</tr>
<tr>
<td></td>
<td>データ</td>
<td></td>
</tr>
</table>
</body>
</html>
上記は、空のセルの罫線を表示するサンプルコードです。
- 最初の
table要素には、empty-cells: show;プロパティを設定しています。これは、空のセルの罫線を表示します。
実行結果
上記コードを実行すると、以下のようになります。
補足
empty-cellsプロパティは、IE 8 以前ではサポートされていません。empty-cellsプロパティは、border-collapseプロパティがcollapseに設定されている場合のみ有効です。
empty-cellsプロパティは、border-style、border-width、border-colorなどのプロパティと組み合わせて使用することができます。empty-cellsプロパティは、thead、tbody、tfoot 要素にも適用することができます。
空のセルの罫線を表示するその他の方法
- border-spacing プロパティを使う
border-spacing プロパティは、セルの間の余白を指定します。このプロパティを使って、セルの間の余白を0に設定することで、空のセルの罫線を表示することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>空のセルの罫線を表示</title>
<style>
table {
border-collapse: collapse;
width: 100%;
border-spacing: 0;
}
td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>データ</td>
<td></td>
</tr>
</table>
</body>
</html>
上記のように、border-spacing プロパティを 0 に設定すると、セルの間の余白がなくなり、空のセルの罫線が表示されます。
::before 疑似要素を使って、空のセルにコンテンツを挿入することができます。このコンテンツには、罫線を表示するための要素を含めることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>空のセルの罫線を表示</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 5px;
}
td::before {
content: "";
display: block;
border-top: 1px solid black;
width: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>データ</td>
<td></td>
</tr>
</table>
</body>
</html>
上記のように、::before 疑似要素を使って、空のセルに上罫線を挿入することができます。
background-image プロパティを使って、空のセルの背景に罫線画像を設定することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>空のセルの罫線を表示</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 5px;
}
td:empty {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAOYktHRkMAAABKAAAACQBAAAUwAQAAAAkAAAB4mAAAADwAAAAoAAAAIAAAACgAAAAQAAAAIAAAACQAAAAEAAAACQAAAAEAAAACgAAAAQAAAAIAAAACQAAAAEAAAACQAAAAEAAAACgAAAAQAAAAIAAAACQAAAAEAAAACQAAAAEAAAACgAAAAQAAAAIAAAACQAAAAEAAAACQAAAAEAAAACgAAAAQAAAAIAAAACQAAAAEAAAACQAAAAEAAAACgAAAAQAAAAIAAAACQAAAAEAAAACQAAAAEAAAAC
css
