Fill remaining table cell with a row of dots

Question

I am creating an HTML report (it's to be a form for filling in). I have a table at the bottom of the form which contains a list of items and yes/no checkboxes at the side. I need to have this work so that cells on the left that contain a question have any empty space filled with dots, e.g.:

Short question......................... yes no
Longer question etc, etc............... yes no

Does anyone know of a way of doing this, ideally by CSS, but on the server side if necessary.

Answer 1

I did this once by using a single GIF image which was repeated on the X axis as the background of the table cells. It worked out pretty nicely, actually. So the GIF image was basically just a single black pixel with some transparent pixels around it.

But then you also have to add a <span> around the actual text of the table cells and let the span have a white background to prevent the black dots from showing underneath.

Answer 2

you can use tables. overflow: hidden will make dots after 150px dissapear and you will have dot fill of different length for different rows

<table>
    <tr>
        <td style="width: 150px; overflow: hidden;">
            Short question........................................................
        </td>
        <td>
            yes no
        </td>
    </tr>
</table>

Answer 3

You can do this all in CSS...

    td div
    {
        width:          20em;
        overflow:       hidden;
        white-space:    nowrap;
    }
    td div:after
    {
        content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
    }

but you've got to:

1. Wrap the cell contents in a div: <td><div>Cell contents</div></td>
2. Set fixed widths on the div(s). Sergej Andrejev's answer also has this problem (plus text wrapping).
3. Enjoy it working in Firefox and IE 8, but it works spottily in other browsers (for now) and not at all in IE 7 or IE 6.

For a truly flexible, cross-browser approach that doesn't require fixed cell widths, you will need to use jQuery for now. (But please start a new question for that.)