0

我有兴趣复制一个使用点来填充单元格内容的表格。请注意，这不是带有省略号的文本溢出，因为点不是截断内容，它们只是在填充内容。而且我理解：在“内容”属性仅限于固定内容而不是动态数量的重复字符之前，所以我认为这不能正常工作。

这里有一些 HTML 可以有效地生成填充的样子：

<table>
    <tr><td>ID</td><td>Col1</td><td>Col2</td></tr>
    <tr><td>1...</td><td>cats............</td><td>rain</td></tr>
    <tr><td>2...</td><td>dogs...........</td><td>snow</td></tr>
    <tr><td>15..</td><td>elephants...</td><td>snow</td></tr>
</table>

我如何在不需要使用“。”的情况下使用 CSS 进行填充？到处？

4

1 回答 1

2

您可以使用::before或::after 伪元素来显示使用 CSS生成的内容。

在这种情况下，我会将第一行中的元素更改为表标题 ( <th>)，并将规则应用于所有td不属于:last-child其行的 s：

td:not(:last-child):after {
  content: '........................................................................................';
}

这是一个演示。

编辑上面只是拉伸了表格以适应生成的内容中的许多字符，这（显然）不是预期的效果。使用完全相同的 HTML，您仍然可以通过设置s 和元素overflow: hidden来使其工作：<td>position: absolute::after

td {
  overflow: hidden;
}

td:not(:last-child):after {
  content: '........................................................................................';
  position: absolute;
}

修改后的演示。

但是，这在 Firefox 中仍然不起作用，因为它（单独）尊重该overflow属性不应该对非块元素起作用的事实。因此，如果您想针对 Firefox（谁不想呢？），您必须<div>在每个单元格中插入 s，并将overflow: hidden和::after元素规则应用于它们。

但是，以上都不会创建无限生成的内容：您只需要在 CSS 中使用一串很长的点。对于无限点，您必须background-image按照对重复问题的回复中的建议使用 a 。

于 2013-12-02T03:37:18.327 回答