HTML-Zeilenrand Volle Tabellenbreite

Question

Ich habe eine automatisch generierte HTML-Tabelle mit ein paar Zeilen, und jede Zeile hat eine andere Anzahl von Spalten.

Ich brauche eine Zeile, die die Zeilen mit der vollen Breite der Tabelle trennt. Ich habe derzeit eine border-top, die nur so lang ist wie diese Zeile, was zu unterschiedlichen Zeilenlängen führt.

Here is a Fiddle to better explain my current situation

Ich hoffe, dass es möglich ist, alle Linien gleich lang zu machen, ohne zu wissen, wie viele Spalten max sind.

Answer 1

Fügen Sie einfach einen border-bottom hinzu. Auf diese Weise wird es immer als die längste Linie so lang sein, ist

td { 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
} 

Hier der Link: https://jsfiddle.net/obun4jv9/2/

---

Wenn Sie eine Grenze Boden haben nicht die letzte Zeile möchten, können Sie tun es wie folgt aus:

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

tr:last-of-type { 
    border-bottom: none; 
} 

-Link: https://jsfiddle.net/obun4jv9/3/

---

Wenn Sie die Breite einstellen können, ist dies auch eine Möglichkeit:

tr { 
    width: 100%; 
    border-top: 1px solid black; 
    display: inline-block; 
} 

tr:first-of-type { 
    border-top: none 
} 

-Link: https://jsfiddle.net/obun4jv9/7/