web-dev-qa-db-ja.com

HTMLテーブル行に境界線を付ける、<tr>

<tr>のように、個々のセルに境界線を付けるのではなく、一度に表の行<td>に境界線を付けることは可能ですか。

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

これは与えられた<tr>を囲む境界線を与えますが、個々のセルを囲む境界線を必要とします。

一度に<tr>に境界線を付けることはできますか？

→jsFiddle

htmlcssborderhtml-table
71
Tiny

bordername__要素にtrname__プロパティを設定することはできますが、CSS 2.1仕様によれば、そのようなプロパティは分離ボーダーモデルには効果がなく、ブラウザではデフォルトになる傾向があります。参照：17.6.1 分離ボーダーモデル 。 （border-collapseのinitial値はCSS 2.1によるとseparatename__であり、ブラウザによってはtablename__に対してdefault valueと設定されているものもあります。明示的にcollapsename__を指定しない限り、ほとんどすべてのブラウザ。

したがって、折りたたみ境界線を使用する必要があります。例：

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>
96
Jukka K. Korpela

絶対に！ただ使う

<tr style="outline: thin solid">

あなたはどの列にあなたが好きです。これが フィドル です。

もちろん、人々が言っ​​たように、あなたは必要に応じてIDやクラス、あるいはその他の手段でこれを行うことができます。

48
takendarkk

はい。回答を更新しましたDEMO

table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

table td:first-child {
     border-left: thin solid;
}

table td:last-child {
     border-right: thin solid;
}

1つの<tr>だけをスタイルしたい場合は、クラスでそれを行うことができます。Second DEMO

13
Itay Gal

CSSクラスを利用する：

tr.border{
    outline: thin solid;
}

そしてそれを次のように使います。

<tr class="border">...</tr>
5
Fanie Reynders

左のセル：

style="border-style:solid;border-width: 1px 0px 1px 1px;"

ミッドセル：

style="border-style:solid;border-width: 1px 0px 1px 0px;"

右のセル：

style="border-style:solid;border-width: 1px 1px 1px 0px;"
1
Juergen
<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
0
Malik