Fügen Sie der Tabellenzeile <tr> den unteren Rand hinzu

Ich habe eine Tabelle von 3 mal 3. Ich brauche eine Möglichkeit, einen Rand für den unteren Rand jeder Zeile hinzuzufügen trund ihm eine bestimmte Farbe zu geben.

Zuerst habe ich den direkten Weg versucht, dh:

<tr style="border-bottom:1pt solid black;">

Aber das hat nicht funktioniert. Also habe ich CSS wie folgt hinzugefügt:

tr {
border-bottom: 1pt solid black;
}

Das hat immer noch nicht funktioniert.

Ich würde lieber CSS verwenden, da ich dann nicht stylejeder Zeile ein Attribut hinzufügen muss. Ich habe dem kein borderAttribut hinzugefügt <table>. Ich hoffe, dass dies mein CSS nicht beeinträchtigt.

Ich hatte vorher so ein Problem. Ich glaube nicht, dass trman ein Border-Styling direkt nehmen kann. Meine Problemumgehung bestand darin, das tds in der Reihe zu stylen:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom:1pt solid black;
}

Fügen Sie border-collapse:collapseIhrer Tabellenregel hinzu:

table { 
    border-collapse: collapse; 
}

Verknüpfung

Verwenden Sie border-collapse:collapseauf dem Tisch und border-bottom: 1pt solid black;auf dem tr

Verwenden

border-collapse:collapse wie Nathan schrieb und du musst einstellen

td { border-bottom: 1px solid #000; }

Hier gibt es viele unvollständige Antworten. Da Sie dem trTag keinen Rahmen zuweisen können, müssen Sie ihn wie folgt auf das tdoder die thTags anwenden :

td {
  border-bottom: 1pt solid black;
}

tdWenn Sie dies tun, bleibt zwischen den beiden ein kleiner Abstand , was wahrscheinlich nicht wünschenswert ist, wenn der Rand so aussehen soll, als wäre er das trTag. Um sozusagen "die Lücken zu füllen", müssen Sie die border-collapseEigenschaft für das tableElement verwenden und ihren Wert collapsewie folgt festlegen :

table {
  border-collapse: collapse;
}

Verwenden

table{border-collapse:collapse}
tr{border-top:thin solid}

Ersetzen Sie "dünnen Feststoff" durch CSS-Eigenschaften.

Zeigen Sie die Zeile als Block an.

tr {
    display: block;
    border-bottom: 1px solid #000;
}

und um alternative Farben einfach anzuzeigen:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Mit der box-shadowEigenschaft können Sie einen Rand eines trElements fälschen . Stellen Sie die Y-Position von box-shadow(unten als 2 Pixel dargestellt) ein, um die Dicke anzupassen.

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Ich habe versucht hinzuzufügen

    table {
      border-collapse: collapse;
    }   

neben dem

    tr {
      bottom-border: 2pt solid #color;
    }

und dann den Grenzkollaps auskommentiert, um zu sehen, was funktioniert hat. Nur der tr-Selektor mit der Eigenschaft am unteren Rand hat für mich funktioniert!

Kein Border CSS ex.

Kein Grenzfoto live

CSS Border ex.

Tisch mit Randfoto live

Ich habe bei dieser Methode festgestellt, dass sich durch den Abstand zwischen den td-Elementen eine Lücke im Rand gebildet hat, aber ich habe keine Angst ...

Ein Weg, um dies zu umgehen:

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

Mit dem CSS:

td.end{
    border:2px solid black;
}

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

Sie können dasselbe auch für die gesamte Zeile tun.

Es gibt border-bottom-style, border-top-style, border-left-style, border-right-style. Oder einfachborder-style das gilt für alle vier Grenzen gleichzeitig.

Weitere Details finden Sie hier (und VERSUCHEN SIE SICH online)

Einige interessante Antworten. Da Sie nur einen Rand unten (oder oben) wollen, sind hier zwei weitere. Angenommen, Sie möchten einen 3px dicken blauen Rand. Im Stilbereich können Sie hinzufügen

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

Auch im Tabellencode

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

Eine andere Lösung hierfür ist border-spacingEigenschaft:

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

Kein CSS-Rand unten:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

Sie können einem tr-Element keinen Rahmen hinzufügen. Dies funktionierte für mich in Firefox und IE 11:

<td style='border-bottom:1pt solid black'>

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}