web-dev-qa-db-ger.com

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

Ich habe eine Tabelle von 3 mal 3. Ich brauche eine Möglichkeit, um am Ende jeder Zeile einen Rahmen einzufügen, tr und ihm eine bestimmte Farbe zu geben.

Zuerst habe ich den direkten Weg ausprobiert, d. H .:

<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 jeder Zeile ein style-Attribut hinzufügen muss. Ich habe dem <table> kein border-Attribut hinzugefügt. Ich hoffe, das hat keinen Einfluss auf mein CSS.

htmlcsshtml-table
322
Sangram Nandkhile

Ich hatte zuvor so ein Problem. Ich glaube nicht, dass tr ein Rand-Styling direkt annehmen kann. Mein Workaround bestand darin, die tds in der Zeile zu formatieren:

<tr class="border_bottom">

CSS:

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

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

table { 
    border-collapse: collapse; 
}

Verknüpfung

432
Nathan Manousos

Verwenden Sie border-collapse:collapse für die Tabelle und border-bottom: 1pt solid black; für das Tr

61
Jpduro

Benutzen 

border-collapse:collapse wie Nathan schrieb und Sie müssen einstellen

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

30
simoncereska

Hier gibt es viele unvollständige Antworten. Da Sie dem Tag tr keinen Rahmen zuweisen können, müssen Sie ihn wie folgt auf die Tags td oder th anwenden:

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

Dadurch bleibt zwischen den einzelnen td ein kleines Leerzeichen. Dies ist wahrscheinlich nicht wünschenswert, wenn der Rahmen so aussehen soll, als wäre er das Tag tr. Um die Lücken sozusagen "füllen" zu können, müssen Sie die border-collapse-Eigenschaft des table-Elements verwenden und ihren Wert auf collapse setzen, wie folgt:

table {
  border-collapse: collapse;
}
22
dmeyer

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

Benutzen 

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

Ersetzen Sie "thin solid" durch CSS-Eigenschaften.

7
Jesse

Bei dieser Methode habe ich festgestellt, dass der Abstand zwischen den td-Elementen eine Lücke in der Grenze verursacht, aber keine Angst hat.

Ein Weg um dieses herum:

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

Ich habe versucht hinzuzufügen

    table {
      border-collapse: collapse;
    }

neben dem

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

und kommentierte dann Border-Collapse aus, um zu sehen, was funktioniert. Nur der Tr-Selektor mit der Eigenschaft bottom-border hat bei mir funktioniert!

Kein Rand CSS ex.

No Border CSS ex.

Kein Grenzfoto live

No Border Photo live

CSS Border ex.

CSS Border ex.

Tisch mit Randfoto live

Table with Border photo live

1
MUFN

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

Sie können dasselbe auch für die ganze Reihe tun.

Es gibt border-bottom-style, border-top-style, border-left-style, border-right-style. Oder einfach border-style, die für alle vier Grenzen gleichzeitig gelten.

Sie können (und TRY YOURSELF online) weitere Details hier

1
David Silva-Barrera

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'>
1
rod

Einige interessante Antworten. Da du nur einen Rand unten (oder oben) haben willst, sind hier noch zwei. Angenommen, Sie möchten einen blauen Rand, der 3 Pixel dick ist. 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>
1
Howard Cary Morris

Kein CSS-Rand unten:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>
0
Gil Perez

Eine andere Lösung dafür ist border-spacing property:

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

table {
  border-spacing: 0px;
}
<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

0
Eugen Konkov

Sie können die box-shadow-Eigenschaft verwenden, um einen Rand eines tr-Elements zu fälschen. Passen Sie die Y-Position von box-shadow (unten als 2px dargestellt) an, 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);
}
0
Ian Bruce