1

3 つの列をドットでつないだ目次を作成したいと思います: song.title........author.....page

「 CSS で先頭のドットを作成する」の catchmyfame の例に従おうとしました が、期待どおりに動作しません。実際、Web サイトから取得した場合とローカル ディスク ファイルとして表示した場合では、問題が異なります。

私のウェブサイトのページの 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 のパディングを使用します。

4

1 に答える 1