Question

我有以下HTML和CSS：

HTML

<table>
    <tbody>
        <tr>
            <td>Row one, cell one</td>
            <td>Row one, cell two</td>
        </tr>
        <tr>
            <td>Row two, cell one</td>
            <td>Row two, cell two</td>
        </tr>
        <tr>
            <td>Row three, cell one</td>
            <td>Row four, cell two</td>
        </tr>
        <tr>
            <td>Row three, cell one</td>
            <td>Row four, cell two</td>
        </tr>
        <tr>
            <td>Row three, cell one</td>
            <td>Row four, cell two</td>
        </tr>
        <tr>
            <td>Row three, cell one</td>
            <td>Row four, cell two</td>
        </tr>
        <tr>
            <td>Row three, cell one</td>
            <td>Row four, cell two</td>
        </tr>
    </tbody>
</table>

CSS

tbody tr:last-child td:first-child {
    border-radius: 0 0 0 0.6em;
}
tbody tr:last-child td:last-child {
    border-radius: 0 0 0.6em 0;
}
tbody tr:first-child td:first-child {
    border-radius: 0.6em 0 0 0;
}
tbody tr:first-child td:last-child {
    border-radius: 0 0.6em 0 0;
}

http://jsfiddle.net/daft/LwT7k/

如果你检查表格，你会看到它有

border-collapse: seperate;
border-spacing: 0;

无论出于何种原因，都需要这些来获得弯曲的边缘。不幸的是，这也导致每个细胞在其内壁上有边界，当细胞一起塌陷时，内壁看起来好像都有双层厚边。

有没有办法用纯CSS或HTML解决这个问题？

Answer 1

更新您的CSS，如下所示。

table {
   border-spacing: 0;
 }
th, td {
border-bottom:1px solid #000;
border-left:1px solid #000;
padding: 0.5em 1em;
}

tbody tr:last-child td:first-child {
border-radius: 0 0 0 0.6em;    
}
tbody tr:last-child td:last-child {
border-radius: 0 0 0.6em 0;
}
tbody tr:first-child td:first-child {
border-radius: 0.6em 0 0 0;
border-top:1px solid #000;
}
tbody tr:first-child td:last-child {
border-radius: 0 0.6em 0 0;
border-top:1px solid #000;
}
tbody tr td:last-child{
border-right:1px solid #000;
}

FIDDLE DEMO

Answer 2

请尝试以下操作： Link

<强> CSS：

th, td {
    border: 1px solid #000;
    padding: 0.5em 1em;
}
td {
    border-bottom:0px solid #000;
}
tr:last-child td {
    border-bottom:1px solid #000;
}
td:first-child {
    border-right:0px solid #000;
    border-right:0px solid #000;
}

Answer 3

th, td {
    border: 1px solid #000;
    border-bottom: none;
    border-right: none;
    padding: 0.5em 1em;
}

tr:last-child td {
    border-bottom: 1px solid #000;
}

tr td:last-child {
    border-right: 1px solid #000;
}

DEMO

Answer 4

尝试在表标记上设置cellpadding和cellspacing：

<table cellpadding="0" cellspacing="0">

希望它有所帮助。

如何删除此表内侧的“双边框”？ CSS

4 个答案: