HTML 行边框满 Table 宽度

HTML Row Border Full Table Width

我有一个自动生成的 HTML table 有几行,每行有不同数量的列。

我需要用 table 的全宽分隔行。我目前有一个 border-top 与该行一样长,导致不同的行长度。

Here is a Fiddle to better explain my current situation

我希望在不知道最多有多少列的情况下,可以使所有行的长度相同。

只需添加一个 border-bottom 即可。这样它就会一直和最长的线一样长

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

这是 link: https://jsfiddle.net/obun4jv9/2/


如果你不想让最后一行底部有边框,你可以这样做:

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

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

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


如果可以设置宽度,这也是一种可能:

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

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

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