Dino Prašo Dino Prašo - 2 months ago 15
HTML Question

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.

Answer Source

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/