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

Question

我在 HTML 表格单行的几个连续单元格上应用了 CSS border-bottom:1px dashed #494949;，但边框不统一。每个单元格末尾的破折号看起来稍长。虚线边框也不统一。我也在使用 border-collapse:collapse;

截图如下:

有什么方法可以获得统一的虚线边框吗？

Answer 1

我在我的应用程序中解决此问题的方法是添加一个额外的行，该行与带有虚线边框的行具有相同的 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>