带圆角 1px 边框的边框间距答案

【问题标题】：border-spacing with rounded 1px borders带圆角 1px 边框的边框间距
【发布时间】：2013-04-06 18:02:03
【问题描述】：

我找不到匹配的答案。

<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;
}

http://jsfiddle.net/uXUnm/

如您所见，table1 有 2px 边框（我想要 1px），table2 没有圆角边框。 border-collapse:collapse; 修复了由 border-spacing: 0; 引起的第一个问题，但打破了四舍五入。谁能告诉我一种方法来解决这两个问题而不会弄乱:first-child、last-child 等选择器？

【问题讨论】：

顺便说一句，这不是你做表格页眉或页脚的方式。 thead、tfoot、tbody、caption 和 th 等元素具有语义含义，应该用于平淡无奇的 colspanned td。
我正在为 MyBB 做这件事，它只在默认皮肤中使用 thead 和 tbody，甚至在所有表格中都没有。需要一段时间才能将所有内容转换为那些。所以我希望有一个终极的 CSS 或 JS 解决方案。

标签： html css html-table border-spacing

【解决方案1】：

这是我固定的 css：

table {
    border:1px solid black;
    border-radius: 5px;
    border-spacing: 0;
}
table td:first-child, table td:not(:first-child):not(:last-child){
    border-right:1px solid black;
}
table tr:first-child td, table tr:not(:last-child) td {
    border-bottom:1px solid black;
}

table thead tr:first-child  td:first-child {
    -webkit-border-top-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    border-top-left-radius: 2px;
}

table thead tr:first-child  td:last-child {
    -webkit-border-top-right-radius:2px;
    -moz-border-radius-topright: 2px;
    border-top-right-radius: 2px;
}
table tbody tr:last-child  td:first-child {
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-bottom-left-radius: 2px;
}

table tbody tr:last-child  td:last-child {
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    border-bottom-right-radius: 2px;
}

你可以设置border-radius: 5px;任何价值，它都会完美地工作！

【讨论】：