0

それに一致する答えが見つかりません。

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

ご覧のとおり、table12 ピクセルの境界線 (1 ピクセルが望ましい) があり、table2丸い境界線はありません。border-collapse:collapse;によって引き起こされた最初の問題を修正しborder-spacing: 0;ますが、丸めを壊します。などのセレクターをいじらず:first-childに両方の問題を修正する方法を教えてもらえますか?last-child

4

1 に答える 1