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?

Waadt

can you show the general html of your table, that we can see where exactly you have attached the css? – Adiabatic

They just appear to be long, decrease the size to 1px to have clearer border. – Corregidor

It is like Starx says. You need to increase or decrease the table size a little bit. By the way you don't need to make the border-bottom on every table cell in the row. you can attach the border directly to the row. – Adiabatic

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.

Snip

Could you provide some demo, doesn't seem to be a working solution – Whoreson

Answer 2

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>

Underlet

Thank you, this helped. I even used an empty row, this way I don't have to hardcode the <td>s, and it feels a bit less workaround-ish. – Apospory

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.

Energetics

Answer 4

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

1. The table has position: relative so the line adapts to that width; unfortunately you can't apply it on a table row.
2. 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.
3. 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.
4. 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.

Dilution

could you please check how it looks like when two cells are merged vertically, i.e. using rowspan? – Berryberryhill

Answer 5

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.

Linderman

Answer 6

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>

Churchgoer

Note that if you absolutely need to highlight only certain rows, I might suggest creating single-column table rows and filling the rows with either DIV or TABLE and applying the .borderTable class to it. – Churchgoer

Answer 7

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

Spelter