Google Chrome overlays additional border on top of other border in table

Question

The code in my JSFiddle produces an orange border in a table spanning four columns, but the result is incorrect in Google Chrome, while it’s correct in Firefox:

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-c3ow {
  border-color: inherit;
  text-align: center;
  vertical-align: top
}

.tg .tg-0pky {
  border-color: inherit;
  text-align: left;
  vertical-align: top
}

.tg .tg-76qt {
  border-color: inherit;
  font-size: 13px;
  text-align: center;
  vertical-align: top
}

.edittext {
  border-top: 2px solid orange !important;
}

<table class="tg">
  <thead>
    <tr>
      <th class="tg-0pky" colspan="3"></th>
      <th class="tg-c3ow" colspan="3"><span style="font-weight:bold">Heading 1</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-0pky" colspan="3"></td>
      <td class="tg-76qt" colspan="3">Main heading 2</td>
    </tr>
    <tr>
      <td class="tg-0pky" colspan="3"></td>
      <td class="tg-0pky ">Text Sample 1</td>
      <td class="tg-0pky ">Text Sample&nbsp;&nbsp;2</td>
      <td class="tg-0pky ">Text Sample 3</td>
    </tr>
    <tr>
      <td class="tg-0pky ">Sample Text</td>
      <td class="tg-0pky">Vertical Heading 1</td>
      <td class="tg-0pky edittext">Vertical Heading 2</td>
      <td class="tg-0pky edittext">ABC 1</td>
      <td class="tg-0pky edittext">ABC 2</td>
      <td class="tg-0pky edittext">ABC 3</td>
    </tr>
    <tr>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
    </tr>
  </tbody>
</table>

Output of Google Chrome:

Output of Firefox:

I tried setting the outline instead of the border, but the outline covers all sides, rather than just the top.

Answer 1

Looks like the colspan:"3" under first tr is the culprit. I just validated both in chrome and firefox both looks same now.

There are unnecessary code which can be removed, however I have not taken care of.

I have added below code and removed colspan

  <td class="tg-0pky"></td>
  <td class="tg-0pky"></td>
  <td class="tg-0pky"></td>

Incase if you ask NO I don't want to add those code and you want to use colspan to fix the issue then answer is also NO since it is a browser specific bug, there are already few articles on this you can look into colspan border issue you will find few.

.edittext {
  border-top: 2px solid orange !important;
}

<style type="text/css">
  .tg {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  .tg td {
    border-color: black;
    border-style: solid;
    border-width: 1px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    overflow: hidden;
    padding: 10px 5px;
    word-break: normal;
  }
  
  .tg th {
    border-color: black;
    border-style: solid;
    border-width: 1px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    overflow: hidden;
    padding: 10px 5px;
    word-break: normal;
  }
  
  .tg .tg-c3ow {
    border-color: inherit;
    text-align: center;
    vertical-align: top
  }
  
  .tg .tg-0pky {
    border-color: inherit;
    text-align: left;
    vertical-align: top
  }
  
  .tg .tg-76qt {
    border-color: inherit;
    font-size: 13px;
    text-align: center;
    vertical-align: top
  }
</style>
<table class="tg">
  <thead>
    <tr>
      <th class="tg-0pky" colspan="3"></th>
      <th class="tg-c3ow" colspan="3"><span style="font-weight:bold">Heading 1</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-0pky" colspan="3"></td>
      <td class="tg-76qt" colspan="3">Main heading 2</td>
    </tr>
    <tr>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky ">Text Sample 1</td>
      <td class="tg-0pky ">Text Sample&nbsp;&nbsp;2</td>
      <td class="tg-0pky ">Text Sample 3</td>
    </tr>
    <tr>
      <td class="tg-0pky ">Sample Text</td>
      <td class="tg-0pky">Vertical Heading 1</td>
      <td class="tg-0pky edittext">Vertical Heading 2</td>
      <td class="tg-0pky edittext">ABC 1</td>
      <td class="tg-0pky edittext">ABC 2</td>
      <td class="tg-0pky edittext">ABC 3</td>
    </tr>
    <tr>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
      <td class="tg-0pky"></td>
    </tr>
  </tbody>
</table>