HTML テーブルの境界線を削除する方法

HTML テーブルに見えている境界線を削除するには、線が表示されているテーブルやセルに CSS の border プロパティを none として指定します。隣り合うセルの境界線を一本にまとめたい場合は、border-collapse: collapse を使います。このプロパティは境界線を削除するのではなく、境界線を結合します。画像などのコンテンツをセルに配置するときも、この違いが役立ちます。collapse は隣接する境界線の接し方を変え、border: none は指定した要素に描画される境界線を取り除きます。

border-collapse: collapse で隣接する HTML テーブルのセル境界線を結合する

CSS の border-collapse プロパティは、テーブルで分離ボーダーモデルと結合ボーダーモデルのどちらを使うかを制御します。値を collapse にすると、隣り合うセルの境界線が結合され、共有する辺に二本の線が別々に描画されなくなります。ただし、テーブルの外周やセルの周囲に既にある境界線まで削除されるわけではありません。また、この指定で間隔がゼロになるわけでもありません。分離ボーダーモデルでは、セルの境界線同士の間隔を border-spacing で指定します。一方、結合ボーダーモデルでは隣接する境界線を結合するため、そのモデルで見える線を解消する方法として border-spacing を変更しても適切な解決にはなりません。

次の簡単な HTML の例では、二つのセルに境界線を指定しています。テーブルのルールによってセル同士が接する位置の線が結合され、セルのルールによって境界線自体は表示されたままになります。

const example = `<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>`;
console.log(example);

<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>

セル内のサンプルテキストは、画像をセルに置く場合は画像要素を含め、ご自身のコンテンツに置き換えてください。この CSS は通常の <td> 要素と <th> 要素に使え、画像サービスには依存しません。padding は各セルの内側に余白を加える指定であり、分離したセル境界線同士の間隔を制御するものではありません。共有する線のある表にしたい場合はセルの境界線を残して collapse を使います。線をなくしたい場合は、以下のように対象となる境界線の指定を削除します。

CSS の border プロパティを none にして HTML テーブルの境界線を削除する

境界線を表示しないようにするには、境界線を消したいテーブルと各種類のセルに border: none を指定します。table, th, td を使ったルールは、テーブル、見出しセル、データセルをまとめて対象にします。テーブルの外周には線がなく、セルの線だけが残っている場合は、th, td だけを対象にできます。どの要素に指定が適用されるかはセレクターで決まり、どの一致する宣言が優先されるかは CSS のカスケードで決まります。より詳細度の高いルールは一般的なセレクターを上書きでき、詳細度が同じなら後に書かれた宣言が優先されます。

border プロパティは、border-width、border-style、border-color をまとめて指定するショートハンドです。これを none に設定すると、対象要素に描画される境界線はなくなりますが、セルの内側の余白やコンテンツは削除されません。たとえば、三種類すべての要素で境界線を表示しない場合は、スタイルシートに table, th, td { border: none; } と指定できます。テーブルを結合ボーダーモデルにする必要もある場合に限り、border-collapse: collapse も追加してください。これは border: none の代わりにはなりません。

線が残る場合は、どの要素がその線を描画しているかを確認してください。テーブルの境界線にはテーブルに一致するルールが必要です。見出しセルやデータセルの境界線には、それぞれ th または td に一致するルールが必要です。次に、別のスタイルシートのルールが指定を上書きしていないか確認します。こうすれば、実際に境界線を持つ要素に絞って修正でき、関係のないテーブルの間隔やコンテンツを変更せずに済みます。