CODEWITHSUNDEEP
htmlcssbordercss-tables
Irfanullah Jan
Irfanullah Jan

Reputation: 3892

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?

Upvotes: 13

Views: 14898

Answers (7)

Smithee
Smithee

Reputation: 968

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.

Upvotes: 1

Cody Moniz
Cody Moniz

Reputation: 5065

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

Upvotes: 0

dizad87
dizad87

Reputation: 468

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>

Upvotes: 3

FurryWombat
FurryWombat

Reputation: 826

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>

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201598

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.

Upvotes: 2

Supr
Supr

Reputation: 19022

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.

Upvotes: 1

vivek
vivek

Reputation: 2004

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.

Upvotes: 0

Related Questions