Leader dots separating columns in an HTML table

I want to create a table of contents in three columns with dots connecting them: song.title......... author........... page

I tried to follow the example given by catchmyfame in Create leading dots in CSS but it's not working the way I expect. In fact, it's differently wrong when I display it as a local disk file than when I get it from my website.

Here's the URL of the page on my website: http://conchord.org/xeno/ix.fsm.html

Here's my CSS:

<style type="text/css">
<!--
#maintable div {
    background: url('dot.gif') repeat-x bottom;
}
#maintable td div
{
    margin-right: 1ex;
}
#maintable td+td div {
    margin-left: 1ex;
}
#maintable td+td div,
#maintable td+td+td div {
    padding-right: 0;
}
#maintable td+td+td div  {
    text-align: right;
    background-color: #fff;
}
#maintable .nodots div,
    background: solid #fff;
    text-align: right;
}
#maintable div span {
    background-color: #fff;
}
#maintable td div span,
#maintable td div span.nodots {
    background-color: white;
}
table#maintable tr td+td+td { background-color: white; }
-->
</style>

And the start of my section:

<body>
<h2>
Index of songs in <i>The Filksong Manual</i>
</h2>    
<table id="maintable">
 <tr>
  <td>
  <div><span>Ballad of Rhysling, The</span></div>
  </td>
  <td>
  <div><span>Roger Scime</span></div>
  </td>
  <td>
  <div><span class="nodots">92 </span></div>
  </td>
 </tr>

Note: I don't want the leader dots to quite reach the next column: I want them to stop about 2em before the start of the next column, hence the 2em padding in my CSS.

Solution

Try the following in your CSS:

TABLE TD DIV SPAN { background-color: white; }

That should eliminate the overlap.

Then I would remove the

#maintable td div
{
    margin-right: 1ex;
}
#maintable td+td div {
    margin-left: 1ex;
}

To remove the gaps. From there, it will likely be a series of minor tweaks to get the exact spacing (perhaps add some padding to the SPAN to avoid the dots from "touching".