HTML table 中分隔列的前导点

Question

我想创建一个 table 的内容，分三列，用点连接： song.title.........作者......页面

我试着按照 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。

Answer 1

在 CSS 中尝试以下操作：

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

这应该可以消除重叠。

然后我会删除

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

消除差距。从那里开始，可能需要进行一系列小调整才能获得准确的间距（可能会向 SPAN 添加一些填充以避免来自 "touching".

的点）

HTML table 中分隔列的前导点

Leader dots separating columns in an HTML table

leader

css-tables