Заполните оставшуюся ячейку таблицы рядом точек

Question

Я создаю отчет в формате HTML (это форма для заполнения). У меня есть таблица в нижней части формы, которая содержит список элементов и флажки «да / нет» сбоку. Мне нужно выполнить эту работу, чтобы в ячейках слева, содержащих вопрос, было пустое пространство, заполненное точками, например ::10000

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

Кто-нибудь знает способ сделать это, в идеале с помощью CSS, но на стороне сервера, если необходимо.

Answer 1

Я сделал это один раз, используя одно изображение GIF, которое повторялось по оси X в качестве фона ячеек таблицы. На самом деле все получилось довольно хорошо. Таким образом, изображение в формате GIF представляло собой простой черный пиксель с несколькими прозрачными пикселями вокруг него.

Но тогда вы также должны добавить <span> вокруг фактического текста ячеек таблицы и позволить интервалу иметь белый фон, чтобы черные точки не показывались внизу.

Answer 2

вы можете использовать таблицы.Переполнение: скрытые заставят точки после 150px исчезнуть, и у вас будет точка разной длины для разных строк

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

Answer 3

Вы можете сделать все это в CSS ...

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

, но вы должны:

1. Обернуть содержимое ячейки в div: <td><div>Cell contents</div></td>
2. Установить фиксированную ширину в div.Ответ Сергея Андреева также имеет эту проблему (плюс перенос текста).
3. Наслаждайтесь этим, работая в Firefox и IE 8, но он работает местами в других браузерах (пока), а не в IE 7 или IE 6.

Для действительно гибкого кросс-браузерного подхода, который не требует фиксированной ширины ячеек, вам пока нужно использовать jQuery.(Но, пожалуйста, начните новый вопрос для этого.)