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/

You could add a center `td`. Give all the `td`s fixed percentage and use `border-bottom` on the second `td`. However, what about indented TOC contents like in chapter 1, there is 1.1, 1.1.1, 1.1.2, 1.2 etc. — Jay Patel, Jul 18 '13 at 06:45
Just for give my opinion, I like your version very much than the deserved one, I think is easier to see what chapter matchs with the page, particulary if there will be a lot of contents. — Arkana, Jul 18 '13 at 06:56

score 11 · Accepted Answer · edited May 23 '17 at 11:45

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
}

This looks good, one thing how would I make all sub lists have their numbers appear in the same position as the top ones, http://jsfiddle.net/WTnma/2/ — Daniel Powell, Jul 18 '13 at 10:04
that looks awesome, even works for further indented lists, will try this at work tomrrow and if its all good will mark this as the answer — Daniel Powell, Jul 18 '13 at 11:50
Unfortunately the pdf software I'm using wont identify the pseduo elements correct so I can process them so I can't use this approach, however for straight HTML i think this is the best so I'll mark it as correct — Daniel Powell, Jul 19 '13 at 02:21

Johan Bouveng · Answer 2 · 2013-07-18T07:02:03.243

0

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/

edited Jul 18 '13 at 07:02

answered Jul 18 '13 at 06:43

Johan Bouveng

565
2
8

Ha, I just added comment with similar answer. However, your fiddle link does not work. – Jay Patel Jul 18 '13 at 06:46
It gives the same output as OP's fiddle. Plus there is no middle `td` like you said. – Jay Patel Jul 18 '13 at 06:58
introduction and system overview manual would be 2 separate headings but they are both on the same line here – Daniel Powell Jul 18 '13 at 10:07

score 0 · Answer 3 · answered Jul 18 '13 at 07:51

0

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.

answered Jul 18 '13 at 07:51

Archna Rangrej

664
3
14
38

that works fine as long as the text is long enough but for something short you still get a blank section http://jsfiddle.net/EBhAX/5/ – Daniel Powell Jul 18 '13 at 10:12
td:first-child { min-width:35%; } td.border { width:60%; border-bottom: 1px dotted black; } change the width of td. & give the min-width of 1st td – Archna Rangrej Jul 18 '13 at 10:47

Table of Contents with dotted underline in html

3 Answers3

Markup

CSS