0

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?

Brett Zamir
  • 14,034
  • 6
  • 54
  • 77
  • I do not know of a CSS function for this but there is a simple PHP solution. – DevlshOne Dec 02 '13 at 02:38
  • 1
    The only 'kinda pure' css option I can think of involves a background image for the dots repeated on the x-axis on the `td`s. Then wrapping the text in another element to mask the dots at the start of the cell. Ugly but it might just work. – Jon P Dec 02 '13 at 02:57

1 Answers1

2

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.

Barney
  • 16,181
  • 5
  • 62
  • 76
  • But these are all a fixed size. I want the number of periods to vary depending on the space left in the cell – Brett Zamir Dec 02 '13 at 06:56
  • @BrettZamir You're right — I've updated my answer with a refined demo. – Barney Dec 02 '13 at 15:53
  • Thank you for the informative answer. However, I'm not getting the div approach to work in Firefox (whether I also include the td-targeted selectors or just the change to div-targeted selectors): http://jsfiddle.net/h78CP/4/ – Brett Zamir Dec 02 '13 at 23:02
  • 1
    @BrettZamir [here's the Firefox-proof version](http://jsfiddle.net/barney/849ua/3/). Your version doesn't work because your selector is targeting all `
    `s that aren't the `:last-child` of their parent — and all of them are, so none get selected. The `
    `s are *inside* the ``s, which is why they need to come afterwards in the selectors.
     – Barney Dec 03 '13 at 09:57
  • Slick, thanks! (I probably shouldn't ask questions while I'm recovering from an illness or I'll miss simple things like that) – Brett Zamir Dec 03 '13 at 14:25
  • @BrettZamir I know what it's like — been there recently and my productivity just hit the floor! – Barney Dec 03 '13 at 15:27
  • Just a FYI for anyone wishing to use this approach: if you want cell padding to ensure there are always some dots (since otherwise at least one cell's contents will be filled completely without room for dots), this unfortunately won't work as the dots won't enter into the padding area. – Brett Zamir Dec 04 '13 at 23:46
  • 1
    But you could put the padding on the div… – Barney Dec 05 '13 at 00:22
  • Cool, with padding-right applied to the div and th, it's looking just like I wanted, thanks!!! http://jsfiddle.net/849ua/4/ – Brett Zamir Dec 05 '13 at 01:56
  • This is also a good resource: https://www.w3.org/Style/Examples/007/leaders.en.html – SAVAFA Oct 03 '20 at 23:18