Html 表格单元格中的非均匀虚线边框

我已经应用了CSS

边框底部：1px虚线#4949边框塌陷：塌陷

以下是截图：


有没有办法得到统一的虚线边框？
如果没有屏幕截图或演示，很难说清楚发生了什么，但听起来它们在过渡到下一个单元格时似乎更长，因为最后一个破折号与下一个单元格中的第一个破折号相接触

在这种情况下，尝试将边框放在整行而不是单个单元格上。
我不确定，但它看起来像是渲染问题。即使使用背景图像而不是边框底部也会有同样的问题。
在这种情况下，最好的办法是创建一个重复图像文件，其高度是表行的高度。将其设置为表格背景，并确保其重复。我已经测试过了，它很有效。请注意，在为本例创建的PNG文件中，虚线的长度各为3px，右侧有三个空白尾随像素，最终尺寸为30px（宽）x29px（高）

代码如下：


.borderTable{
背景：url(http://www.windycitywebsites.com/wp-content/uploads/2012/03/dash_png.png);
背景重复：重复；
}
.可边界td{
高度：29px；
}
浏览器在呈现虚线边框时有一些奇怪之处。您可以通过删除单元格间距和单元格填充，并在
tr
元素上而不是单元格上设置边框来解决这些问题，例如：

table { border-collapse: collapse; }
td { padding: 0; }
tr { border-bottom:1px dashed #494949; }

但这在IE9上似乎仍然失败（在单元格连接处），旧浏览器忽略了表行上设置的边框

考虑改用实心灰色边框。它工作稳定，在视觉上可以接受，甚至可能更好。
我在我的应用程序上解决这个问题的方法是添加一个额外的行，该行的colspan与带虚线边框的行的colspan相同。边界应与跨度长度一致：

<table>
    <!--row with dashed border-->
      <tr>
          <td style = "border-bottom: 1px dashed green;" colspan="3"></td>
      </tr>
    <!--added row so dotted border looks uniform-->
      <tr>
          <td style="height: 5px;" colspan="3"></td>
      </tr>
    <!--existing rows with lots of columns-->
      <tr>
          <td></td>
          <td></td>
          <td></td>
      </tr>
</table>


几乎对我有效，但在td中添加边框仍然会导致奇怪的虚线边框。将边框添加到td内的一个div中为我修复了它

const RowBorder = styled('div')`
  border-top: 1px dashed black;
  width: 100%;
`;
return (
  <table>
    <thead>
      <tr>
        <td colSpan="6">
          <RowBorder />
        </td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td colSpan="2">Col5</td>
      </tr>
      <tr>
        <td colSpan="6">
          <RowBorder />
        </td>
      </tr>
    </thead>
    <tbody>{rows}</tbody>
  </table>
)

const RowBorder=styled（'div'））`
边框顶部：1px黑色虚线；
宽度：100%；
`;
返回(
可乐
可乐
可乐
可乐
可乐
{rows}
)
九年过去了，这仍然让人头疼

此方法适用于IE11+和所有其他主要浏览器，无需仅为边框创建空行：


表格{
宽度：100%；
边界塌陷：塌陷；
位置：相对；/*必需#1*/
}
运输署{
高度：60px；
文本对齐：居中；
背景：#EEE；
边框：1px实心#CCC；
}
tr:n个孩子（偶数）td{
背景：DDD；
}
运输署：第n名儿童（1）{
填充：0；/*必需#2*/
宽度：30%；
}
/*必需的#3*/
第n个孩子（1）：：之后{
显示：块；
内容：''；
宽度：100%；
边缘底部：-1px；
位置：绝对位置；
边框底部：2个虚线；
}
运输署：第n名儿童（2）{
宽度：50%；
}
运输署：第n名儿童（3）{
宽度：20%；
}
/*必需的#4*/
跨度{
显示器：flex；
宽度：100%；
身高：100%；
对齐项目：居中；
证明内容：中心；
}

第1行，第1单元
第1行第2单元
第1行第3单元
第2行第1单元
第2行，第2单元
第2行第3单元
第3行，第1单元
第3行第2单元
第3行，第3单元
您能否显示表格的通用html，以便我们可以看到您将css附加到的确切位置？它们看起来很长，请将大小减小到1px以获得更清晰的边框。就像Starx所说的那样。您需要稍微增大或减小表的大小。顺便说一下，您不需要在行中的每个表单元格上设置边框底部。您可以将边框直接附加到行。请注意，如果您确实需要仅突出显示某些行，我可能建议您创建单列表行，并使用DIV或table填充这些行，然后对其应用.borderTable类。您是否可以提供一些演示，这似乎不是一个有效的解决方案谢谢，这很有帮助。我甚至使用了一个空行，这样我就不必对
进行硬编码，而且感觉解决方法也少了一点。