css 圆形1px边框的边框间距

ufj5ltwl 于 2023-01-22 发布在其他

关注(0)|答案(1)|浏览(142)

我找不到匹配的答案。
超文本：

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

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

CSS：

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等选择器？

css

来源：https://stackoverflow.com/questions/16001356/border-spacing-with-rounded-1px-borders

1条答案

按热度按时间

5lhxktic1#

这里是我的固定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;
}

您可以设置边界半径：5 px;任何值和它将完美地工作！

赞(0）回复(0）举报 2023-01-22

我来回答

css 圆形1px边框的边框间距

1条答案

相关问题

热门标签

最新问答