Padding-background/text filler in CSS?

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

A quick cheat I've used in the past is to flood all the fields with the trailing characters (like '------------------...') and then hide the overflow with with css.

<table>
   <tr>
      <td>lolvalue------------------------------------</td>
      <td>lol date</td>
   </tr>
   <tr>
      <td>lolvalue12345-------------------------------</td>
      <td>lol date</td>
   </tr>
</table>

And then style it with:

td { width:50px; overflow:hidden; }

Answer 2

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.

Answer 3

css:
.extendo { background: url(dot.gif) 0 0 repeat-x; width: 100px; }
.words { background: none; }

markup:

<div class="extendo"><span class="words">lalala</span></div>

you may need to specify padding or alternate background