How to display a good looking dotted border in table?

Question

I've been struggling with CSS for a couple of hours in order to make a perfect spaced dotted line for my table. I've tried the border property, creating a image and put it as background, repeating it in Y axis, and some other stuff (even in CSS3), but my case is a little more specific than the ones I found out by searching in Google: I have alternated columns and rows classes in my table, and it seems that I can't define the whole row with a continuous border.

My CSS:

th { height: 42px; font-weight: bold; font-size: 15px; vertical-align:bottom; padding: 8px 16px; margin-bottom: 5px; border-bottom: 2px dotted #999; }
th.odd { background-color: #e6e6e6; }
th.even { background-color: #ddd; }
td { padding: 16px; }
tr{ border-bottom: 2px dotted #999; }
tr.even { background-color: #eee; }
tr.even td.even { background-color: #e2e2e2; }
tr.odd td.even { background-color: #eaeaea; }

I've tried also to change the "border-bottom" ones to a background-image with dots and spaces, as I mentioned before.

What I have today is this:

And I want the the dots to be continuous as this: . . . . . . . . . . . .

Answer 1

Disclaimer: This is not a simple solution and is rather complex to understand but if you really want to produce continuous dots then this is the only approach that I can think of. I wouldn't recommend adding so much complexity for what is a small aberration with the borders but I'd leave it to you.

The approach for creating the continuous border is:

• A dotted background is added to the table itself using radial-gradient images. Since table is the parent container, the dots stretch continuously in a seamless manner.
• The size of the background gradient in Y-axis is equivalent to height of the td + the padding on either side. This is critical to the working.
• The position of the background in Y-axis is calculated as -1 * (background-size in Y-axis/2) - 2px.
• The background-repeat is set to round so that it kind of always produces full dots. All these are critical to the solution.
• Colors cannot be added to the td or the tr as solid colors because they would hide the table background and so the solution is to add them via linear-gradient (except that the color does not change). This is done because the size of gradients can be controlled whereas that of solid color cannot be.

table { /* to produce the dots via radial gradient */
  background-image: radial-gradient(circle at 50% 50%, black 1px, transparent 2px);
  background-size: 8px 50px; /* size in y-axis is equal to td height + padding top + padding bottom */
  background-position: 2px -27px; /* position in y-axis is -1 * size/2 - 2px */
  background-repeat: round; /* makes dots repeat in round manner */
  border-collapse: collapse;
}
td {
  vertical-align: bottom;
  height: 46px; 
  padding: 2px;
}
tr:nth-child(even) {
  background-image: linear-gradient(#eee, #eee);
  background-size: 100% 46px; /* size in y-axis is height of td */
  background-repeat: no-repeat;
}
tr:nth-child(even) td:nth-child(even) {
  background-image: linear-gradient(#e2e2e2, #e2e2e2);
  background-size: 100% 46px;
  background-repeat: no-repeat;
}
tr:nth-child(odd) td:nth-child(even) {
  background-image: linear-gradient(#eaeaea, #eaeaea);
  background-size: 100% 46px;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<table>
  <tr>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
  </tr>
  <tr>
    <td>Hello World!!!</td>
    <td>Hello World!!!</td>
    <td>Hello World!!!</td>
  </tr>
  <tr>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
  </tr>
  <tr>
    <td>Hi There!!!</td>
    <td>Hi There!!!</td>
    <td>Hi There!!!</td>
  </tr>
</table>
<br/>
<table>
  <tr>
    <td>Lorem Ipsum Dolor Sit Amet</td>
    <td>Lorem Ipsum Dolor Sit Amet</td>
    <td>Lorem Ipsum Dolor Sit Amet</td>
  </tr>
  <tr>
    <td>Lorem Ipsum Dolor</td>
    <td>Lorem Ipsum Dolor</td>
    <td>Lorem Ipsum Dolor</td>
  </tr>
  <tr>
    <td>Lorem Ipsum Dolor Sit</td>
    <td>Lorem Ipsum Dolor Sit</td>
    <td>Lorem Ipsum Dolor Sit</td>
  </tr>
  <tr>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
</table>

---

As shown in the fiddle that you had provided in comments, the whole thing becomes a lot simpler if all the td will have some solid color as their background (either white or other shades of gray). In such cases, we don't need the extra linear-gradient backgrounds for the td or the other background-* properties. This approach would work even when the dimensions of the tr and td are not fixed.

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 12px;
  font-family: Arial;
  color: #333;
  font-size: 13px;
  background-image: radial-gradient(circle at 50% 50%, #999 1px, transparent 1px);
  background-size: 4px 2px;
  background-repeat: round;
}
td {
  padding: 16px;
  border-bottom: 2px solid transparent;
}
tr.odd td.odd {
  background: #fff padding-box;  /* the padding-box property is to prevent the background from being present under the 2px transparent border area */
}
tr.even td.odd {
  background: #eee padding-box;
}
tr.even td.even {
  background: #e2e2e2 padding-box;
}
tr.odd td.even {
  background: #eaeaea padding-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<table>
  <tr class="odd">
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum
      <br>Dolor Sit Amet</td>
  </tr>
  <tr class="even">
    <td class="odd">Lorem Ipsum
      <br>Dolor
      <br>Sit
      <br>Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
  </tr>
  <tr class="odd">
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
  </tr>
  <tr class="even">
    <td class="odd">Lorem
      <br>Ipsum
      <br>Dolor
      <br>Sit
      <br>Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
  </tr>
</table>

Answer 2

Try setting border-left : 1px solid white to separate double dots. But create the table using <div>. For this, it is the better way.

.row {
  border-bottom-style: dotted;
  border-width: 1px;
  height: 20px;
}
.columnG {
  background-color: gray;
  float: left;
  width: 50%;
  height: 20px;
}
.columnW {
  background-color: white;
  float: left;
  width: 50%;
  height: 20px;
}

<div class="row">
  <div class="columnG">
    XXXX
  </div>
  <div class="columnW">
    XXXX
  </div>

</div>
<div class="row">
  <div class="columnG">
    XXXX
  </div>
  <div class="columnW">
    XXXX
  </div>

</div>