Non Uniform Dashed Border in Table Cells

The way I fixed this problem on my app was by adding an extra row with the same colspan as the row with the dashed border. The border will be uniform to the length of the span:

<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>

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.

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.