CODEWITHSUNDEEP
htmlcss
user5182503
user5182503

Reputation:

Table border-collapse: collapse not working when tr {display:table}

I need a solution when thead is fixed and tbody has scroll. I found such solution on SO, but I have a border-collapse:collapse problem with it. This is my html code:

<table>
    <thead>
        <tr>
            <th></th>
            <th>#</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>00000001</td>
            <td>Name 1</td>
        </tr>
        <tr>
            <td></td>
            <td>00000001</td>
            <td>Name 2</td>
        </tr>
        <tr>
            <td></td>
            <td>00000001</td>
            <td>Name 3</td>
        </tr>
    </tbody>
</table>

This is css rules:

table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

thead, tbody {
    width: 100%;
}

thead {
    overflow-y: scroll;
    display: table;
    table-layout: fixed;
    width:calc(100% - 16px);
}

tbody {
    overflow: scroll;
    height: 150px;
    display: block;
}

tr {
    width: 100%;
    text-align: left;
    display: table;
    table-layout: fixed;
}

th {
    border:1px solid #cccccc;
    border-collapse: collapse;
}

td {
    border:1px solid #cccccc;
    border-collapse: collapse;
}

This is fiddle. As you see the borders between rows are 2 px, but must be 1 px. What is my mistake?

Upvotes: 0

Views: 1718

Answers (1)

Tasos Fel
Tasos Fel

Reputation: 331

try to add this , so you dont have to change your styles : border-top:0;

td {
    border:1px solid #cccccc;
    border-top:0;
    border-collapse: collapse;

}

Upvotes: 1

Related Questions