是
border-collapse:collapse;
和
border-spacing: 0px; /* only active/useful with option "separate" */
border-collapse:separate;
相同?
最佳答案
他们与众不同! (请参见下面的代码片段进行确认)。
根据MDN here和here
和
这是 SNIPPET ,其中包含一些示例
body {
margin: 0;
font-family: Arial;
}
table {
width: 100%;
margin:30px 0
}
td {
border: 1px solid red
}
.collapse {
border-collapse: collapse;
}
.separate {
border-collapse: separate;
}
.no-spacing {
border-spacing: 0
}
.spacing {
border-spacing: 10px
}
<h4>Borders will collapse and therefore no space between them</h4>
<table class="collapse no-spacing">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<h4>Borders will try to separate between them but then using border-spacing:0 will join the borders without collpasing (looking like has double borders)</h4>
<table class="separate no-spacing">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<hr />
<h3> 2 more examples </h3>
<h4>Border-spacing won't work due to only applies when border-collapse isset to separate</h4>
<table class="collapse spacing">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<hr />
<h4>Borders will separate between them due to having border-spacing:10px and because border-collapse has separate as initial value</h4>
<table class="spacing">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
关于html - border-collapse : collapse; and border-spacing: 0;和有什么不一样,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36035461/