Table of Contents with dotted underline in html

Question

I'm trying to create a table of contents in html in the form of

Introduction.................................1
Heading 1....................................1
Heading 2....................................2

Now I'd like the ... to go from the last character in the title to the number of the right.

I can get this working sort of in a table with a single tr and two tds (one for the title and one for the page number) with a border-bottom on the first td, however the .. goes across the entire border instead of just from the last character.

Is there a better way I can represent this in html?

As to why I'm doing this in HTML we are exporting it to a HTML-> PDF converter so it has to be HTML.

This is what I have so far

<h1>Contents</h1>

<ul>
    <li>
        <table style="width:100%">
            <tr style="">
                <td>System Overview Manual..adn the dog went to the zoo and had a really good time and it was really really good.</td>
                <td style="text-align: right; "> <span id='contents1'>2</span>

                </td>
            </tr>
        </table>
    </li>
</ul>

Fiddle: http://jsfiddle.net/EBhAX/

Answer 1

You could use generated content for the dots... (I learned this from this post)

We create the dot leaders with a ‘:before’ pseudo-element attached to the LI elements. The pseudo-element fills the whole width of the list item with dots and the SPANs are put on top. A white background on the SPANs hides the dots behind them and an ‘overflow: hidden’ on the UL ensures the dots do not extend outside the list: (from this w3.org article)

EDIT: Updated code to allow for nested lists

FIDDLE

Markup

<ul class="outer">
    <li><a href="#">Introduction</a><span>1</span></li>
    <li class="nested">
        <ul class="inner">
            <li><a href="#">Header 1</a><span>2</span>
            </li>
            <li><a href="#">Header 2</a><span>2</span>
            </li>
        </ul>
    </li>
    <li><a href="#">Header 2</a><span>3</span></li>
</ul>

CSS

ul
{
    list-style: none;
    padding: 0;
    overflow-x: hidden;
}
.outer {
    width: 70%;  
}
.inner
{
    padding-left: 20px;
}
li:not(.nested):before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "
}
li a:first-child {
    padding-right: 0.33em;
    background: white
}
a + span {
    float: right;
    padding-left: 0.33em;
    background: white
}

Answer 2

You can set the border-bottom on the middle td with a class:

td.text {
    border-bottom: 1px dotted black
}

Fiddle: http://jsfiddle.net/EBhAX/2/

Answer 3

See this Fiddle.

http://jsfiddle.net/EBhAX/4/

You can add one more td in middle & give the css to that td with border-bottom. give the css "width in percent" to all the td.

Try this It will be helpful.