Responsive table pseudo element alignment help

[webscot]

The article at https://css-tricks.com/responsive-data-tables/ was quite helpful in creating responsive tables.

However, some responsive tables have a long enough string that more than one line is required to display the cell contents. Once the content of each cell enters the second line, it sits below the content of the pseudo element (:before).

How can I use CSS to cause all of the cell’s content to be displayed to the right of the pseudo element as if in a columnar fashion?

I have tried several things to no avail.

[Beverleyh]

Not sure what you’re referring to. Can you set up a reduced example in CodePen so we can more easily see the problem?

[webscot]

Thanks Beverleyh,

I believe this will clarify. Please let me know if there is any issue viewing it.

http://codepen.io/anon/pen/dYjgGz

[webscot]

Of course anon pens can’t be embedded. :)

OK, let’s try this one.
http://codepen.io/webscot/pen/avjRZm

[webscot]

I don’t want the Product string to hit a line break and run under the :before content, “Product.” I want it to line break and start at the same point where line one of the cell content begins.

[Beverleyh]

Maybe this? http://codepen.io/anon/pen/MaBZpP

[webscot]

Thank you so much. That works perfectly! I think you should write an article. I’m sure I’m not the only one that could use this solution.

[Beverleyh]

Great idea – I might just do that :D

[Author]

Posts