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:

<table>
	<tr>
		<td>Your Information</td>
		<td>Some Information details...</td>
	</tr>
	<tr>
		<td>Some More Important Information</td>
		<td>Moar information...</td>
	</tr>
</table>

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.

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

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

3. 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?

Normally it shouldn’t be a web developers job to fix these kind of issues, but in terms of user experience it is important to fix these kind of issues to keep your project ux friendly.

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 tr diffrently.
Some older browsers does not support nth-child, so I added a fix for that as well.

Here is an example of the css:
https://jsfiddle.net/Lhxpj690/