Dynamic number of dots for cell-padding via CSS?

Question

I'm interested in reproducing a table which uses dots to pad cell contents. Note that this is not text-overflow with an ellipses because the dots are not truncating content, they are just filling things up. And I understand :before with the "content" property is restricted to fixed content rather than a dynamic number of repeating characters, so I don't think that can be made to work.

Here's some HTML to produce effectively what the padding looks like:

<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>

How might I do this padding using CSS without needing to utilize "." everywhere?

Answer 1

You can use ::before or ::after pseudo-elements to display generated content with CSS.

In this case, I would change the elements in the top row to be table headers (<th>) and apply the rule to all tds that aren't the :last-child of their row:

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

Here's a demo.

EDIT The above just stretched the table to fit however many characters were in the generated content, which (obviously) wasn't the desired effect. Using exactly the same HTML, you can still get this to work by setting overflow: hidden on the <td>s and position: absolute on the ::after elements:

td {
  overflow: hidden;
}

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

Revised demo.

However, this still won't work in Firefox because it (alone) respects the fact that the overflow property shouldn't work on non-block elements. So if you want to target Firefox (and who doesn't?) you'll have to insert <div>s inside each cell, and apply the overflow: hidden and the ::after element rules to them.

None of the above will create infinite generated content though: you'll just need to use a very long string of dots in your CSS. For infinite dots you'd have to use a background-image as suggested in the response to the duplicate question.