No row in IE11

HTML

<body>
    <br />
    <div id="rowCount">
        <table class='t2'>
            <tr>
                <th>Click a Cell should highlight all in the row</th>
            </tr>
            <tr>
                <td>tr:active td</td>
                <td>td:active</td>
            </tr>
        </table>
    </div>
</body>

CSS

table {
	cursor: default;
	border: 1px solid black;
	background-color: transparent;
}
div {
	z-index: 0;
	display: block;
	border:4px solid #CC3300;
	width: 80%;
	background-color: #4D70DB;
}
th{
	text-align: left;
}
td{
	border: 1px solid #000000;
}

tr:hover td {
	border:1px solid #CC3300;
}

tr {
  border:12px solid #111111;
  
}
tr:active td{
	background-color: #CC3300;
}
td:active {
	color: aqua;
}

JavaScript

/*Works as expected in