Non Uniform Dashed Border in Table Cells

Question

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:

Is there any way I can get uniform dashed border?

Answer 1

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.

Answer 2

Hard to say for sure what's going on without a screenshot or demo, but it sounds like they appear to be longer at the transition to the next cell because the last dash is touching the first dash in the next cell.

In that case, try to put the border on the entire row instead of the individual cells.

Answer 3

Your best bet in this case would be to create a repeating image file, the height of which is the height of the table row. Set it as the table background, and make sure it repeats. I've tested it, and it works. Note that in the PNG file created for this example, the dashes are each 3px long, and there are three blank trailing pixels on the right, for final dimensions of 30px (width) x 29px (height).

Here's the code:

.borderTable {
  background: url(http://www.windycitywebsites.com/wp-content/uploads/2012/03/dash_png.png);
  background-repeat: repeat;
}

.borderTable td {
  height: 29px;
}

<table class="borderTable" width="350" border="0" cellspacing="0" cellpadding="0">
  <tr class="stuff">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="stuff">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Answer 4

I'm not sure but it looks like rendering issue. Even using a background-image instead of border-bottom will have same kind of issue.