Question

I’d like to create a table that looks like this:

---

lolvalue———|lol date|some other column data 1

lolvalue12345|lol date 2|some other column data2

---

in CSS/HTML. Basically, there is ‘data’ and there is a filler that goes to the right, but doesn’t count as data, so it doesn’t stretch the column, filling the space stretched by the max-length row.

It’s like in those old content books where there were dots guiding us to the right page, remember?

How could I do that? There is no property like ‘padding-backgrond’. I can probably create this by using layers for only one column but then, how do I determine the width of the layer?

Another approach would be to generate appropriate amount of characters within software, but hmm, that wouldn’t be portable across fonts and browsers.

I use Ruby on Rails for server-side, if it makes a difference.

Answer 1

You could add a background-image to your td and wrap the inner text with an inline element such as a span and style that with a background-color:

<style type='text/css'>   td      { background:url(dot.gif) 0 0 repeat-x; }   td span { background-color:#fff; } </style>  <table>   <tr>     <td><span>loltext</span></td>     <td>loldate</td>   </tr>   <tr>     <td><span>lolvalue12345</span></td>     <td>lol date</td>   </tr> </table> 

This way, you wouldn’t need to assign a width.