Fill the empty space in the rows of the table with characters

Question

I would like to add certain characters to the row of the HTML table using jQuery, so that each row fills a certain number of pixels. I would like to be able to align to the right and center the columns. For instance:

Header Header2 Header3 something.......foo...........baz another........abcde.........html 

Answer 1

You can use the repeating background image in the <td> , and then wrap the contents of the text in the <span> and set the background color of these <span> tags to match what’s behind it.

See a working demo in jsFiddle
http://jsfiddle.net/gDtYz/1/

HTML

 <table> <tr> <th>Header</th> <th>Header2</th> <th>Header3</th> </tr> <tr> <td><span>something</span></td> <td><span>foo</span></td> <td><span>baz</span></td> </tr> <tr> <td><span>another</span></td> <td><span>abcde</span></td> <td><span>html</span></td> </tr> </table> 

CSS

 table { width: 350px; background: #fff; font-family: sans-serif; } th { font-weight: bold; text-align: center; } td { background: transparent url("http://nontalk.s3.amazonaws.com/dots.png") repeat-x 0 75%; height: 14px; font-size: 14px; vertical-align: bottom; text-align: center; } td span { background: #fff; line-height: 18px; height: 18px; display: inline-block; padding: 0 4px; } th:first-child, td:first-child { text-align: left; } td:first-child span { padding: 0 4px 0 0; } th:last-child, td:last-child { text-align: right; } td:last-child span { padding: 0 0 0 4px; }