html - 方法: 「表の行を線で区切る」

Question

テーブル行を含む基本的な HTML テーブルがあります。私の目標は、これらの表の行を目に見える線で区切ることです (内容を読みやすくするため)。

どうすればこれを行うことができますか？

Answer 1

それにはいくつかの方法があります。HTML だけを使用して、次のように記述できます。

<table border=1 frame=void rules=rows>

または、最初の行の上と最後の行の下にも境界線が必要な場合は、

<table border=1 frame=hsides rules=rows>

ただし、これは柔軟性に欠けます。たとえば、線をこのように点線にしたり、1 ピクセルより太くしたりすることはできません。これが、過去に人々が特別な区切り行を使用した理由です。これは、行を生成することを目的としたコンテンツだけで構成されています (特に行を作成する必要がある場合、たとえば数ピクセルの高さですが、それは可能です)。

ほとんどの場合、最近では CSSborderプロパティを使用して目的を達成しています。それはかなりシンプルでクロスブラウザです。ただし、行を連続させるにcellspacing=0は、 タグの属性tableまたは CSS ルールを使用して、セル間のスペースを空けないようにする必要があることに注意してくださいtable { border-collapse: collapse; }。このようなスペースを削除するには、セル内に (できれば CSS を使用して) パディングを追加する必要がある場合があります。

最も簡単には、使用できます

<style>
table {
  border-collapse: collapse;
}
tr { 
  border: solid;
  border-width: 1px 0;
}
</style>

これにより、最初の行の上と最後の行の下にも境界線が配置されます。これを防ぐには、たとえば次のようにスタイル シートに追加します。

tr:first-child {
  border-top: none;
}
tr:last-child {
  border-bottom: none;
}

Answer 2

行の境界線をスタイルするだけです：

​table tr {
    border-bottom: 1px solid black;
}​

table tr:last-child { 
    border-bottom: none; 
}

ここにフィドルがあります。

@pkyeckの言及に従って編集。2 番目のスタイルは、最後の行の下の行を避けます。多分あなたはこれを探しています。

Answer 3

border-bottomcss プロパティを使用できます。

table {
  border-collapse: collapse;
}

table tr {
  border-bottom: 1px solid black;
}

table tr:last-child {
  border: 0;
}

<table>
  <tr>
    <td>1</td>
    <td>Foo</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Bar</td>
  </tr>
</table>

Answer 4

CSSを使用する必要があります。

私の意見では、テーブルがある場合は、線の両側に別々の線を付けるとよいでしょう。

このコードを試してください：

HTML：

<table>
    <tr class="row"><td>row 1</td></tr>
    <tr class="row"><td>row 2</td></tr>
</table>

CSS：

.row {
    border:1px solid black; 
}

さよなら

アンドレア

Answer 5

HTML

<table cellspacing="0">
  <tr class="top bottom row">
    <td>one one</td>
    <td>one two</td>
  </tr>
  <tr class="top bottom row">
    <td>two one</td>
    <td>two two</td>
  </tr>
  <tr class="top bottom row">
    <td>three one</td>
    <td>three two</td>
  </tr>

</table>​

CSS：

tr.top td { border-top: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
tr.row td:first-child { border-left: thin solid black; }
tr.row td:last-child { border-right: thin solid black; }​

デモ

Answer 6

行要素を css でスタイルします。

border-bottom: 1px solid black;