css - 表格边框渗入 Chrome 中的相邻单元格

Question

我在 Chrome 中遇到了一个奇怪的问题，边框渗入相邻的单元格。

这就是我想要的样子以及它在 Firefox 中的显示方式

这是它在 Chrome 中的显示方式

是什么导致此边框渗入另一个单元格？

    .myTable{
        border:0;
        padding:0;
        border-spacing:0;
        border-collapse:collapse;
        table-layout:fixed;
        width:280pt;
    }

    .leftTopRight{
        border-width:0.5pt 0.5pt 0 0.5pt;
        border-color: black;
        border-style: solid;    
        text-align:center;
    }
    .leftRight{
        border-width:0 0.5pt 0 0.5pt;
        border-color: black;
        border-style: solid;
        text-align:center;  
    }
    .allAround{
        border-width:0.5pt;
        border-color: black;
        border-style: solid;
        text-align:center;      
    }
    .leftRightBottom{
        border-width:0 0.5pt 0.5pt 0.5pt;
        border-color: black;
        border-style: solid;    
        text-align:center;
    }
     td {
         color:black;
         font-size:11pt;
         font-weight:400;
         font-style:normal;
         text-decoration:none;
         font-family:Calibri, sans-serif;
         vertical-align:bottom;
         white-space:nowrap;
    }

<table class="myTable">
  <tr class="singleHeight">
    <td colspan=6 class="leftTopRight">Number</td>
  </tr>
  <tr class="singleHeight">
    <td colspan=6 class="leftRight">&nbsp;</td>
  </tr>
  <tr class="singleHeight">
    <td colspan=1 class="allAround">z</td>
    <td colspan=5 class="leftRightBottom">1018</td>
  </tr>  
</table>

https://jsfiddle.net/fbt1nwv7/

Answer 1

从 .leftRightBottom 中删除 border-collapse:collapse 和左边框(这样您就不会在这两个单元格相遇的地方获得双倍宽度的边框。)

    .myTable{
        border:0;
        padding:0;
        border-spacing:0;
        /*border-collapse:collapse;*/
        table-layout:fixed;
        width:280pt;
    }

    .leftTopRight{
        border-width:0.5pt 0.5pt 0 0.5pt;
        border-color: black;
        border-style: solid;    
        text-align:center;
    }
    .leftRight{
        border-width:0 0.5pt 0 0.5pt;
        border-color: black;
        border-style: solid;
        text-align:center;  
    }
    .allAround{
        border-width:0.5pt;
        border-color: black;
        border-style: solid;
        text-align:center;      
    }
    .leftRightBottom{
        border-width:0 0.5pt 0.5pt 0;
        border-color: black;
        border-style: solid;    
        text-align:center;
    }
     td {
         color:black;
         font-size:11pt;
         font-weight:400;
         font-style:normal;
         text-decoration:none;
         font-family:Calibri, sans-serif;
         vertical-align:bottom;
         white-space:nowrap;
    }

<table class="myTable">
  <tr class="singleHeight">
    <td colspan=6 class="leftTopRight">Number</td>
  </tr>
  <tr class="singleHeight">
    <td colspan=6 class="leftRight">&nbsp;</td>
  </tr>
  <tr class="singleHeight">
    <td colspan=1 class="allAround">z</td>
    <td colspan=5 class="leftRightBottom">1018</td>
  </tr>  
</table>