Matilda Yi Pan
Matilda Yi Pan

Reputation: 658

CSS border collapse not applying to top and left border

This is a test template~ In orde to debug, I have changed the border colour of div (parent of the table) to red. As it is shown, you can clearly see there are BLACK border on the top and the left. I can't fix it. Please help.

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

Upvotes: 1

Views: 3297

Answers (2)

Carlos Calla
Carlos Calla

Reputation: 6716

You might be looking for this:

Working sample: http://jsfiddle.net/707ha2vq/5/

You are having elements containing one another and both with borders, so you get double borders. In a table, you normally give td elements a border and border-collapse: collapse; so borders that are together collapse in two elements. But you are having cell's border and row's border so it won't collapse, there is where you see double or triple borders.

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

Upvotes: 1

vamshichalla
vamshichalla

Reputation: 141

I think the those extra borders are of Table borders. Try to replace your css mentioned above with the following, What I did is removed border for table and given required borders for individual header


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

Upvotes: 0

Related Questions