表单元格中的非统一虚线边框 [英] Non Uniform Dashed Border in Table Cells

问题描述

我已经在HTML表格的单一行的几个连续单元格上应用CSS border-bottom：1px broken＃494949; ，但边框不统一。每个单元格末尾的破折号显示得稍长。虚线边框也不统一。我也使用 border-collapse：collapse;

I have applied CSS border-bottom:1px dashed #494949; on several consecutive cells of a single row of an HTML table, but the border is not uniform. The dashes at the end of each cell appear little longer. Dotted border is also not uniform. I am also using border-collapse:collapse;

这是屏幕截图：

>

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

Is there any way I can get uniform dashed border?

感谢

推荐答案

浏览器在渲染虚线边框时有异常。您可以通过删除单元格间距和单元格填充并在 tr 元素而不是单元格上设置边框来对抗它们，例如

Browsers have oddities in rendering dashed borders. You can fight against them by removing cell spacing and cell padding and setting the border on a tr element and not on cells, e.g.

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

但是这似乎仍然在IE 9上失败（在单元格结点），旧浏览器忽略边框

But this still seems to fail on IE 9 (at cell junctions), and old browsers ignore borders set on table rows.

请考虑使用纯灰色边框。它工作一致，可能在视觉上可接受，也许更好。

Consider using a solid gray border instead. It works consistently and might be visually acceptable, maybe even better.

这篇关于表单元格中的非统一虚线边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！