我有一张桌子,我需要一个单元格之间的垂直间距和一个未被垂直间距切割的底部边框。如果我使用这个CSS:
table td {
border-right: 15px solid transparent;
}
table tr {
border-bottom: thin solid #d6d6d6;
}
...底部边框由垂直边框切割。我也试过边界间距(以及'边界崩溃:单独')没有运气。我真的需要底部边框在连续的所有单元格下跨越未切割。有没有办法实现这个目标?
EDITED: 由于大多数答案建议我使用填充,我添加此图像以显示会发生什么。单元格内的图像延伸到填充之外,最终接近下一个单元格(我使用Firebug选择td元素并在此处显示正确的填充:
因此,我需要完成一个边框间距,使单元格内容与necxt单元格保持一定距离,而不会切割底部边框。
答案 0 :(得分:3)
/* COLLAPSE CELLS */
table {
border-collapse: collapse;
}
/* SPACE CELLS */
table td:not(:last-child) {
padding-right: 15px;
}
/* BORDER BOTTOM */
table td {
border-bottom: 1px solid #000;
}

<table>
<tr>
<td>Cell 1</td>
<td>Cell 1</td>
</tr>
<tr>
<td><img src="http://lorempicsum.com/futurama/300/300/2"></td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Looooooooooooooooooooooooooooooooong Text</td>
</tr>
</table>
&#13;
答案 1 :(得分:1)
不要使用透明边框,只需在填充底部添加间距。
table td {
padding-bottom:10px;
}
答案 2 :(得分:0)
感谢Apolo,你在评论中给了我解决方案。事实上,另一个CSS规则(table{width: 100%;}
)由框架(我使用Drupal 7)提供,这违反了我自己的规则。问题解决了。