Question

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

这里有一些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执行此填充而无需使用“。”到处？

Answer 1

您可以使用::before或::after pseudo-elements来显示带有CSS的generated content。

在这种情况下，我会将顶行中的元素更改为表标题（<th>），并将规则应用于不是td的{{1}}的所有:last-child他们的行：

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

Here's a demo

编辑以上只是将表拉伸以适应生成的内容中的许多字符，这（显然）不是所需的效果。使用完全相同的HTML，您仍然可以通过在overflow: hidden上设置<td>并在position: absolute元素上设置::after来实现此目的：

td {
  overflow: hidden;
}

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

Revised demo

然而，这仍然不适用于Firefox，因为它（单独）尊重overflow属性不适用于非块元素的事实。那么，如果您想要定位Firefox（以及谁没有？）you'll have to insert <div>s inside each cell, and apply the overflow: hidden and the ::after element rules to them。

上述所有内容都不会创建无限生成的内容：您只需要在CSS中使用一长串点。对于无限点，您必须使用background-image，如对重复问题的回答中所建议的那样。

通过CSS进行单元格填充的动态点数？

1 个答案: