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

Answer 2

我认为那些额外的边框是桌面边框。尝试使用以下内容替换上面提到的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:first-child {
        background-color: #EEE;
        padding: 10px;
        border-right: 1px solid grey;
        border-bottom: 1px solid grey;
       border-collapse: collapse;
    }
    th:nth-child(2) {
        background-color: #EEE;
        padding: 10px;
        border-right: 1px solid grey;
        border-bottom: 1px solid grey;
       border-collapse: collapse;
    }
    th:nth-child(3) {
        background-color: #EEE;
        padding: 10px;
        border-bottom: 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;
    }

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

2 个答案: