Google Chrome 在 table 中的其他边框之上叠加附加边框

Question

我的 JSFiddle 中的代码在跨越四列的 table 中生成橙色边框，但结果在 Google Chrome 中不正确，而在火狐浏览器：

.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>

GoogleChrome的输出：

Firefox 的输出：

我尝试设置 outline 而不是 border，但是轮廓覆盖了所有边，而不仅仅是顶部。

Answer 1

您错误地将 edittext class 添加到 垂直标题 2 列。

你只需要删除这个class

希望你找到了解决方案

谢谢

Answer 2

看起来第一个 tr 下的 colspan:"3" 是罪魁祸首。我刚刚在 chrome 和 firefox 中验证了两者现在看起来都一样。

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

我添加了以下代码并删除了 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>

Google Chrome 在 table 中的其他边框之上叠加附加边框

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

html

css

google-chrome

html-table

border