CODEWITHSUNDEEP
htmlhtml-tableborder
Dino Prašo
Dino Prašo

Reputation: 611

HTML Row Border Full Table Width

I have a auto-generated HTML table with a few rows, and each row has a different number of columns.

I need to have a line separating the rows with is the full width of the table. I currently have a border-top which is only as long as that row, leading to different line lengths.

Here is a Fiddle to better explain my current situation

I hope that it is possible to make all the lines the same length, without knowing how many columns max there are.

Upvotes: 0

Views: 95

Answers (1)

Nils Schlüter
Nils Schlüter

Reputation: 1436

Just add a border-bottom as well. This way it will always be as long as the longest line

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

Here is the link: https://jsfiddle.net/obun4jv9/2/

If you don't want the last row to have a border bottom, you can do it like this:

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

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

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

If you can set the width, this is also a possibility:

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

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

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

Upvotes: 2

Related Questions