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

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> 

Answer 2

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 3

Is the demo I'm using radial gradient to make the dots. You can "play" with the range control at the bottom do find the exact result.

 $('input').on('input', function(){ $('tr').css('background-size', $(this).val() + 'px 4px'); $('#num').html($(this).val()); }); 

 table { width: 400px; border-spacing: 0; } th { text-align: left; } tr { background: radial-gradient(circle at bottom, black 1px, transparent 1.5px) repeat-x bottom; background-size: 5px 4px; } tr:first-child { font-weight: bold; } tr:nth-child(odd) { background-color: #eee; } td { padding: 5px; /*border-bottom:1px dotted #aaa;*/ /*background: radial-gradient(circle at bottom, black 1px, transparent 1.5px) repeat-x bottom; background-size: 5px 4px;*/ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tbody> <tr> <td>asdf</td> <td>asdf</td> <td>asdf</td> <td>asdf</td> </tr> <tr> <td>asdf</td> <td>asdf</td> <td>asdf</td> <td>asdf</td> </tr> <tr> <td>asdf</td> <td>asdf</td> <td>asdf</td> <td>asdf</td> </tr> <tr> <td>asdf</td> <td>asdf</td> <td>asdf</td> <td>asdf</td> </tr> </tbody> </table> <br /> <input type="range" value="5" min="5" max="15" /> <pre>background-size: <span id="num">5</span>px 4px;</pre> 

Answer 4

I had to use a tr > td > div approach to get a nice looking dashed border. If you put the dashed border on either the td or tr, the dashes run into each other depending on the length of the td which creates a weird looking effect where the dashes are longer than they should be.

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