Table border adding 1px in the corner of each TD

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