CSS边框折叠无法使用虚线边框

Question

我有以下代码：

 table {
   border-collapse: collapse
 }
 table td {
   border-bottom: 3px dotted red
 }

<table>
  <tr>
    <td>AAAAAAAAAAAAAA</td>
    <td>BBBBBBBBBBBBBB</td>
  </tr>
</table>

当我使用Firefox渲染时，单元格会崩溃，但在其他浏览器中，如Chrome，IE，Opera和Safari则不然。例如，在单元格之间显示“大点”而不是简单点。

见下面的图片：

有什么想法吗？我该如何解决这个问题？