Geben Sie einer HTML-Tabellenzeile einen Rahmen, <tr>

Ist es möglich, eine Tabellenzeile auf einmal zu begrenzen <tr>, anstatt einzelnen Zellen einen Rand zu geben, <td>wie z.

<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>

Dies gibt einen Rand um das Gegebene <tr>, erfordert jedoch einen Rand um einzelne Zellen.

Können wir <tr>nur auf einmal eine Grenze setzen ?

→ jsFiddle

Sie können borderEigenschaften für ein trElement festlegen , aber gemäß der CSS 2.1-Spezifikation haben solche Eigenschaften keine Auswirkung auf das Modell mit getrennten Rändern, das in Browsern normalerweise die Standardeinstellung ist. Ref.: 17.6.1 Das Modell der getrennten Grenzen . (Der Anfangswert ist nach CSS 2.1, und einige Browser auch nach Standardwert für . Der Nettoeffekt ist sowieso , dass Sie Grenze auf fast allen Browsern , wenn Sie explizit spezifi getrennt werden .)border-collapseseparatetablecollapse

Daher müssen Sie kollabierende Ränder verwenden. Beispiel:

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

Absolut! Benutz einfach

<tr style="outline: thin solid">

auf welcher Reihe auch immer du magst. Hier ist eine Geige .

Wie bereits erwähnt, können Sie dies natürlich über eine ID, eine Klasse oder auf andere Weise tun, wenn Sie dies wünschen.

Ja. Ich habe meine Antwort DEMO aktualisiert

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;
}

Wenn Sie nur eine stylen möchten, <tr>können Sie dies mit einer Klasse tun: Second DEMO

Nutzen Sie CSS-Klassen:

tr.border{
    outline: thin solid;
}

und benutze es wie:

<tr class="border">...</tr>

Linke Zelle:

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

mittlere Zelle (n):

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

rechte Zelle:

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

Sie können die Box-Shadow-Eigenschaft für ein tr-Element als Ersatz für einen Rahmen verwenden. Als Plus gilt jede Randradius-Eigenschaft für dasselbe Element auch für den Feldschatten.

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);

Nachdem ich lange damit gekämpft habe, bin ich zu dem Schluss gekommen, dass die spektakulär einfache Antwort darin besteht, die Tabelle nur mit leeren Zellen zu füllen, um jede Zeile der Tabelle auf die gleiche Anzahl von Zellen aufzufüllen (wobei natürlich Colspan berücksichtigt wird). Mit computergeneriertem HTML ist dies sehr einfach zu arrangieren und vermeidet das Kämpfen mit komplexen Problemumgehungen. Abbildung folgt:

<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>


<h3>Simple solution, artificially insert empty cells</h3>

<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only<td><td>
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only<td>
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>