Border Issues on Html Table

Use this as a minimum basic table css

.tbl {
  width: 100%; /* you may change the width in % */
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: auto;
}
.tbl * {
  margin: 0;
  box-sizing: border-box;
}
table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 0;
  background-color: transparent;
}
thead, tbody, tr {
  width: inherit;
}
th, td {
  vertical-align: top;
  text-align: left;
  hyphens: auto;
  white-space: normal;
}
@media (max-width: 767.9px) {
  table {
    border: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}

With this html

<div class="tbl">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 11</td>
        <td>Data 12</td>
      </tr>
      <tr>
        <td>Data 21</td>
        <td>Data 22</td>
      </tr>
    </tbody>
  </table>
</div>

With this css, your table is responsive for all screen sizes and you only have to give some colors and/or borders to the th and td

using the CSS you provided just add border-spacing: 0; to your table style

table {
            border-width: 2px;
            border-color: #ddd;
            border-style: solid;
            border-spacing: 0;

        }

You can view it working here

Reset the border-spacing which has a default of c.2px.

If you set this to 0, the issue is resolved.

table {
  border-width: 2px;
  border-color: #ddd;
  border-style: solid;
  margin: 1em auto;
  border-spacing: 0;
  /* this */
}

table th {
  border-collapse: collapse;
  border-bottom: 10pt solid #830504;
  padding: 8px;
  text-align: center;
}

table tr {
  padding: 8px;
}

table td {
  padding: 4px;
  border-collapse: none;
}

<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
</table>