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
}
我有一个自动生成的 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
}