Non Uniform Dashed Border in Table Cells - html

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

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>

Answer 2

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 3

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

Answer 5

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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="stuff">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

Answer 6

DIZAD's answer has almost worked for me, but adding borders to the td still resulted in weird dashed borders. Adding the border to a div inside the td fixed it for me.
const RowBorder = styled('div')`
border-top: 1px dashed black;
width: 100%;
`;
return (
<table>
<thead>
<tr>
<td colSpan="6">
<RowBorder />
</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td colSpan="2">Col5</td>
</tr>
<tr>
<td colSpan="6">
<RowBorder />
</td>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
)

Answer 7

Nine years on, and this is still giving people a headache!
This method works from IE11+ and all other major browsers without having to create an empty row just for a border:
table {
width: 100%;
border-collapse: collapse;
position: relative; /* Required #1 */
}
td {
height: 60px;
text-align: center;
background: #EEE;
border: 1px solid #CCC;
}
tr:nth-child(even) td {
background: #DDD;
}
td:nth-child(1) {
padding: 0; /* Required #2 */
width: 30%;
}
/* Required #3 */
td:nth-child(1)::after {
display: block;
content: ' ';
width: 100%;
margin-bottom: -1px;
position: absolute;
border-bottom: 2px dashed;
}
td:nth-child(2) {
width: 50%;
}
td:nth-child(3) {
width: 20%;
}
/* Required #4 */
span {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
<table>
<tr>
<td><span>Row 1, Cell 1</span></td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td><span>Row 2, Cell 1</span></td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td><span>Row 3, Cell 1</span></td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</table>
This works because the border is attached to a psuedo element with a position of absolute that takes its width from the table, rather than being bind purely to the cell.
There are four main areas to be aware of (commented in the CSS):
The table has position: relative so the line adapts to that width; unfortunately you can't apply it on a table row.
The first cell of each row should not have any padding, otherwise the line may not be flush with the bottom of the row; if you require padding, then this can be defined in #4.
This creates the line itself; it's basically a pseudo element of position: absolute, with a width: 100% to stretch across the table. I have also added a negative margin half the size of the border so it sits nicely in between the two rows. You may also notice that there are no top/left/right/bottom properties; this is so that the element remains where it was before the absolute positioning.
This is the element inside the first cell of each row; the main thing is to add height: 100% so it forces the line created at #3 to be at the bottom of the row. After that is considered, you can style it however you like.
The standard border inside the td is not required; I've included that to demonstrate where the cells are.