Search code examples
htmlcssbordercss-tables

Non Uniform Dashed Border in Table Cells

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;

Here is the screenshot:

enter image description here

Is there any way I can get uniform dashed border?

Solution

  • 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; }

    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.