我试图通过使用第 nth-child 为除第一行和最后一行之外的所有行放置边框间距,但由于某种原因它不起作用。我做错了什么?
table {
border: 1px solid black;
width: 98%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 10px 50px;
}
td {
border: 1px solid black;
}
tr:nth-child(1) td:nth-child(1) {
border-spacing : 0px 0px;
}
tr:nth-child(1) td:nth-child(2) {
border-spacing : 0px 0px;
}
tr:nth-child(3) td:nth-child(1) {
border-spacing : 0px 0px;
}
tr:nth-child(3) td:nth-child(2) {
border-spacing : 0px 0px;
}
<table>
<tr><td> row1 col1 </td><td> row1 col2 </td></tr>
<tr><td> row2 col1 </td><td> row2 col2 </td></tr>
<tr><td> row3 col1 </td><td> row3 col2 </td></tr>
<tr><td> row4 col1 </td><td> row4 col2 </td></tr>
<tr><td> row5 col1 </td><td> row5 col2 </td></tr>
</table>
最佳答案
检查下面的代码,您可以将 border-spacing
效果应用于不适用于 td 或 tr
的表格,您只能对 td
使用填充直接使用 :first-child 和 :last-child
删除第一个和最后一个 td 或 tr
的填充。
table {
border: 1px solid black;
width: 98%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 10px 50px;
}
td {
border: 1px solid black;
padding: 50px 10px;
}
tr:first-child td,tr:last-child td {
padding: 5px;
}
<table>
<tr><td> row1 col1 </td><td> row1 col2 </td></tr>
<tr><td> row2 col1 </td><td> row2 col2 </td></tr>
<tr><td> row3 col1 </td><td> row3 col2 </td></tr>
<tr><td> row4 col1 </td><td> row4 col2 </td></tr>
<tr><td> row5 col1 </td><td> row5 col2 </td></tr>
</table>
关于html - 使用第 nth-child 为所有行放置边框间距,第一行和最后一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35447948/