HTML CSS examples for CSS Widget:Table
CSS styling a table of contents
<html> <head> <style> .list li {<!--from w ww.j av a 2 s . c o m--> position:relative; overflow:hidden; width:331px; } .list li:after { font-family:Times New Roman; font-size:121%; content:"..............."; text-indent:-2px; display:block; letter-spacing:35px; position:absolute; left:0px; bottom:0px; z-index:-2; font-weight:bold; } .list li span { display:inline; background-color:Chartreuse; padding-right:6px; } .list li .number { float:right; font-weight:bold; padding-left:6px; } </style> </head> <body> <div style="margin:25px 22px 200px 22px;"> <div style="text-align:center;font-size:150%;letter-spacing:.1em;margin-bottom:10px;margin-right:-.1em;"> Lorem ipsu </div> <ul class="list" style="padding-left:180px;"> <li style="margin:0 0 .6em 0;"> <span>Lorem ipsum dolor si</span> <span class="number">Lo</span> </li> <li style="margin:0 0 .5em 0;"> <span style="padding-left:.6em;">Lorem ipsum d</span> <span class="number">Lo</span> </li> <li style="margin:0 0 .5em 0;"> <span style="padding-left:.6em;">Lorem ipsum dol</span> <span class="number">Lor</span> </li> <li style="margin:0 0 .5em 0;"> <span style="padding-left:.6em;">Lorem ipsum dolor sit ame</span> <span class="number">Lo</span> </li> <li style="margin:0 0 .5em 0;"> <span style="padding-left:.6em;">Lorem ipsum dolor sit a</span> <span class="number">Lore</span> </li> <li style="margin:0 0 .5em 0;"> <span style="padding-left:.6em;">Lorem ipsum dolor s</span> <span class="number">Lor</span> </li> <li style="margin:0 0 1.5em 0;"> <span style="padding-left:.6em;">Lorem ipsum dolor sit </span> <span class="number">Lorem</span> </li> <li style="margin:0 0 .5em 0;"> <span>Lorem ipsum dolor sit amet, consectetur adipi</span> <span class="number">L</span> </li> <li style="margin:0 0 .5em 0;"> <span>Lorem</span> <span class="number">Lor</span> </li> </ul> </div> </body> </html>