Question

我正在创建一个HTML报告（它是一个填写表格）。我在表单底部有一个表，其中包含项目列表和侧面是/否复选框。我需要做这项工作，以便左边包含问题的单元格有任何空白空间填充点，例如：

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: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
    }

但你必须：

将单元格内容换入div：<td><div>Cell contents</div></td>
在div上设置固定宽度。 Sergej Andrejev的回答也有这个问题（加上文字包装）。
享受它在Firefox和IE 8中的工作，但它在其他浏览器（现在）中非常有效，而在IE 7或IE 6中完全没有。

对于不需要固定单元格宽度的真正灵活的跨浏览器方法，您现在需要使用jQuery。（但请为此开始一个新问题。）

用一行点填充剩余的表格单元格

3 个答案: