html - CSS 边框折叠不适用于顶部和左侧边框

Question

这是测试模板~ 为了调试，我将 div(表的父级)的边框颜色更改为红色。 如图所示，您可以清楚地看到顶部和左侧有黑色边框。 我无法修复它。 请帮忙。

HTML:

<div class="roundcorner">
<table border="1 solid">
    <tr>
        <th>Out of 100 points how would you score Governemnt performance for each section.</th>
        <th>Most like to see increased</th>
        <th>Most willing to see decreased</th>
    </tr>
    <tbody>
        <tr>
            <td id="p2">
                <input type="text" name="name" />
            </td>
            <td id="i1">lakdksakdmksa</td>
            <td id="d1">
                <input type="radio" name="sex" />Yes</td>
        </tr>
        <tr>
            <td id="p2">
                <input type="text" name="name" />
            </td>
            <td id="i2">dsfwsedfwefwe</td>
            <td id="d2">
                <input type="radio" name="sex" />No</td>
        </tr>
    </tbody>
</table>
<div>

CSS:

.roundcorner {
    border: 1px solid grey;
    border-radius: 10px;
    width: 100%;
    overflow: hidden
}
.roundcorner table {
   // border-collapse: collapse;
    width: 100%;
    border-spacing: 0;
   border: 1px solid grey;
    overflow: hidden
}
th {
    background-color: #EEE;
    padding: 10px;
    border: 1px solid grey;
   border-collapse: collapse;
}
td {
    text-align: centre;
    //border: 1px solid grey;
    border-collapse: collapse;
}
tr:hover {
    background: #fafafa;
    // font-weight:bold;
}
input[type=radio] {
    vertical-align:middle;
    margin-left: 45%;
    margin-right: 45%;
}
input[type=text] {
    width:20%;
    height:20px;
    margin-left:40%;
    margin-right:40%;
    border-radius:3px;
    border: 1px solid grey;
}
td:first-child {
    width: 25%;
    height:60px;
}
td:nth-child(2) {
    width: 50%;
    text-align: center;
    height: auto;
    padding: 10px;
}
td:nth-child(3) {
    width: 25%;
    height:60px;
}

JSFiddle

Answer 1

您可能正在寻找这个:

工作样本:http://jsfiddle.net/707ha2vq/5/

您的元素彼此包含且都带有边框，因此您会得到双边框。在表格中，您通常会为 td 元素提供边框和 border-collapse: collapse; 以便在两个元素中折叠在一起的边框。但是您有单元格的边框和行的边框，所以它不会折叠，在那里您会看到双边框或三边框。

.roundcorner {
    border: 1px solid grey;
    border-radius: 10px;
    width: 100%;
    overflow: hidden
}
.roundcorner table {
   // border-collapse: collapse;
    width: 100%;
    border-spacing: 0;
    overflow: hidden
}
th {
    background-color: #EEE;
    padding: 10px;
    border-collapse: collapse;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
}
td {
    text-align: centre;
    //border: 1px solid grey;
    border-collapse: collapse;
}
tr:hover {
    background: #fafafa;
    // font-weight:bold;
}
input[type=radio] {
    vertical-align:middle;
    margin-left: 45%;
    margin-right: 45%;
}
input[type=text] {
    width:20%;
    height:20px;
    margin-left:40%;
    margin-right:40%;
    border-radius:3px;
    border: 1px solid grey;
}
td:first-child {
    width: 25%;
    height:60px;
}
td:nth-child(2) {
    width: 50%;
    text-align: center;
    height: auto;
    padding: 10px;
}
td:nth-child(3) {
    width: 25%;
    height:60px;
}