HTML: t1 a copy and paste safe table
I recently found a problem in user experience on Firefox (and some Chrome versions).
I was using a normal table syntax like this:
As I tried to copy the contents of the second cell in my table, I got following data in my clipboard:
Some Information details
Notice the TAB char infront of the text?
This appeared in Firefox only (for me).
What is causing this problem?
If you don’t know, there are three ways to select a text.
Double / Triple click.
Double / Triple click on the text and magically all text is selected.
If you copy the text now you won’t see the issue.
Start selecting from the left side of the text.
If you start selecting the text from the left side and end at the last character you will likely see the issue.
Start selecting from the right side of the text.
Same as 2., but start on the right side.
On 2. & 3. the problem is appearing.
You can try it out on this fiddle.
Apparently if you start selecting in another cell or outside the table you will get this problem.
What to do now?
I needed a simple table with 2 columns so it was relatively easy to provide a fix.
Additionally I needed a solution for coloring the background of each
Some older browsers does not support
nth-child, so I added a fix for that as well.
Here is an example of the css: