0
我找不到匹配的答案。具有圆角1px边框的边框间距
<table class="table1">
<tr>
<td class="red header" colspan="4">
Table1 header</td>
</tr>
...
<tr>
<td class="red footer" colspan="4">Footer</td>
</tr>
<table class="table2">
<tr>
<td class="red header" colspan="4">
Table2 header</td>
</tr>
...
<tr>
<td class="red footer" colspan="4">Footer</td>
</tr>
table {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000;
}
.table1 {
border-spacing: 0;
}
.table2 {
border-collapse: collapse;
}
.footer {
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.header {
-moz-border-top-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-bottom-top-radius: 5px;
-moz-border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
text-align: center;
}
td {
border: 1px solid #000;
}
正如你所看到的,table1
有2px的边框(我想1px的),table2
没有圆角边框。 border-collapse:collapse;
修复了由border-spacing: 0;
引起的第一个问题,但打破了圆角。任何人都可以告诉我一种方法来解决这两个问题,而不会搞乱:first-child
,last-child
等选择器?
顺便说一句,这不是你如何做表头或页脚。有'thead','tfoot','tbody','caption'和'th'等元素具有语义意义,应该用在平淡无奇的td上。 – cimmanon
我正在为MyBB做它,它只使用默认外观中的thead和tbody,即使在所有表格中都不使用。需要一段时间才能将所有内容转换为这些内容所以我希望有一个最终的CSS或JS解决方案。 – Destroy666