在 HTML 表格中分隔列的前导点答案

【问题标题】：Leader dots separating columns in an HTML table在 HTML 表格中分隔列的前导点
【发布时间】：2019-06-11 23:36:30
【问题描述】：

我想在三列中创建一个目录，并用点连接它们：歌曲.标题............作者............页面

我尝试按照 catchmyfame 在 Create leading dots in CSS 但它没有按我预期的方式工作。事实上，当我将其显示为本地磁盘文件时，与从我的网站获取它时相比，它的错误不同。

这是我网站上页面的 URL： http://conchord.org/xeno/ix.fsm.html

这是我的 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>

我的部分的开始：

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

注意：我不希望前导点完全到达下一列：我希望它们在下一列开始之前停止大约 2em，因此我的 CSS 中的填充是 2em。

【问题讨论】：

获取 dot.gif 时出现 404。
谢谢。这就解释了为什么网站上的错误与我的本地磁盘上的错误不同。我已经上传了 dot.gif。现在的问题是为什么第三列中有领导点。
我还在原始问题中对我的 CSS 做了一些小改动。

标签： css-tables leader

【解决方案1】：

在您的 CSS 中尝试以下操作：

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

这应该消除重叠。

然后我会删除

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

消除间隙。从那里开始，可能需要进行一系列细微的调整才能获得准确的间距（可能会在 SPAN 中添加一些填充以避免点“接触”。

【讨论】：

这改善了情况，但我仍然在右对齐数字前领先。
td+td DIV 和 td DIV 仍然有 margin-left 和 margin-right 分别呈现您看到的“空”空间。
我将此问题标记为已回答。我将用我想做的剩余调整开始一个新问题。