表格边框在每个TD的角落添加1px

Question

I have a table that when I use border-collapse:collapse; it shows a single 1px in the border of the row coming from the following row. Any ideas how I can fix that?

I want it to look exactly like that without any padding between the cells or anything.

This is in Firefox by the way, I haven't tried other browsers.

Here is my JSFiddle.

HTML / CSS

 .responsive-table { border-collapse: collapse; width: 100%; } .responsive-table td { border: 1px solid #ddd; } .responsive-table tbody tr:nth-of-type(2n) { background: #f7f7f7; } .responsive-table tbody tr:nth-of-type(2n+1), .resp-content, .resp-div { background: #eee; } .responsive-table thead th, .basic-table thead th { background: #006bb2; color: #fff; } .responsive-table th { border: 1px solid #0087e0; } 

 <table class="responsive-table"> <thead> <tr> <th>H</th> <th>H</th> <th>H</th> <th>H</th> <th>H</th> <th>H</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> </tbody> </table> 

Answer 1

Just increase the lower border width of the table header:

.responsive-table th {
    border: 1px solid #0087e0;
    border-bottom-width: 2px;
}

 .responsive-table { border-collapse: collapse; width: 100%; } .responsive-table td { border: 1px solid #ddd; } .responsive-table tbody tr:nth-of-type(2n) { background: #f7f7f7; } .responsive-table tbody tr:nth-of-type(2n+1), .resp-content, .resp-div { background: #eee; } .responsive-table thead th, .basic-table thead th { background: #006bb2; color: #fff; } .responsive-table th { border: 1px solid #0087e0; border-bottom-width: 2px; } 

 <table class="responsive-table"> <thead> <tr> <th>H</th> <th>H</th> <th>H</th> <th>H</th> <th>H</th> <th>H</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> </tbody> </table> 

---

Alternatively, border-bottom-style: double; will specify, as the name suggests, a double border:

.responsive-table th {
    border: 1px solid #0087e0;
    border-bottom-style: double;
}

 .responsive-table { border-collapse: collapse; width: 100%; } .responsive-table td { border: 1px solid #ddd; } .responsive-table tbody tr:nth-of-type(2n) { background: #f7f7f7; } .responsive-table tbody tr:nth-of-type(2n+1), .resp-content, .resp-div { background: #eee; } .responsive-table thead th, .basic-table thead th { background: #006bb2; color: #fff; } .responsive-table th { border: 1px solid #0087e0; border-bottom-style: double; } 

 <table class="responsive-table"> <thead> <tr> <th>H</th> <th>H</th> <th>H</th> <th>H</th> <th>H</th> <th>H</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> </tbody> </table> 

More information: Border conflict resolution

Answer 2

Use pseudo-elements to cover it up:

.responsive-table thead th:after {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    border-left: 1px solid #0087e0;
}

Just change the color of the border to whatever matches. You could also use a :before to cover up the far left side's blemish.