HTML: t1 a copy and paste safe table

HTML

<h2>Normal Table</h2>
<table class="normal">
  <tr><td>Cell #1</td><td>Select &amp; Copy me</td></tr>
  <tr><td>Cell #2</td><td>Or me</td></tr>
</table>

<br><br>

<h2>T1 Table</h2>
<table class="t1">
  <tr><td>Select &amp; Copy is fixed:</td><td>Select &amp; Copy me</td></tr>
  <tr><td>The table is designed for multiline use. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td><td>A random cell.</td></tr>
  <tr data-hidden="true"><td>Some Hidden Row, you found.</td><td>Ahh dont view me..., well this is visible for IE6 :(</td></tr>
  <tr><td>Works even on the other side:</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing etdt, sed do eiusmod tempor incididunt ut labore et dolore magna atdqua. Ut enim ad minim veniam, quis nostrud exercitation trlamco laboris nisi ut atdquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate vetdt esse cillum dolore eu fugiat ntrla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ctrpa qui officia deserunt moltdt anim id est laborum.</td></tr>
  <tr><td>ThisIsALongWordThatShouldNotBreak</td><td></td></tr>
  <tr><td>It is responsive!</td><td>Try to resize me.</td></tr>
</table>

SCSS

$t1TableOddRowColor: #EEEEEE;
$t1TableEvenRowColor: #FCFCFC;
$t1TableFallbackRowColor: #EEEEEE;


table.normal
{
    display: table;
    width: 100%;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    border: 0;
}

table.normal tr:nth-child(odd)
{
    background: $t1TableOddRowColor
}
table.normal tr:nth-child(even)
{
    background: $t1TableEvenRowColor
}

table.t1
{
    display: table;
    width: 100%;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    border: 0;
}
table.t1 tr
{
    width: 100%;
    display: inline-block;
    padding: .6em;
    box-sizing: border-box;
}
table.t1 td
{
    float: left;
    display: block;
    max-width: 25%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    line-height: 20px;
    word-break: break-word;
}

table.t1 td~td
{
    float: none;
    display: block;
    max-width: none;
    padding-left: 30%;
    margin: 0;
    font-weight: normal;
    overflow: visible;
}


table.t1 td~td:after
{
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}


table.t1 tr
{
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    background: $t1TableFallbackRowColor;
}

table.t1 tr~tr
{
    border-top: 1px solid $t1TableOddRowColor;
    border-bottom: 1px solid transparent;
}

table.t1 tr:nth-child(odd){
    border-top: 1px solid $t1TableOddRowColor;
    border-bottom: 1px solid $t1TableOddRowColor;
    background: $t1TableOddRowColor;
}
table.t1 tr:nth-child(even){
    border-top: 1px solid $t1TableEvenRowColor;
    border-bottom: 1px solid $t1TableEvenRowColor;
    background: $t1TableEvenRowColor;
}
table.t1 tr[data-hidden=true]{
    display:none;
}
table.t1 tr[data-hidden=true]~tr:nth-child(odd){
    border-top: 1px solid $t1TableEvenRowColor;
    border-bottom: 1px solid $t1TableEvenRowColor;
    background: $t1TableEvenRowColor;
}
table.t1 tr[data-hidden=true]~tr:nth-child(even){
...