rotateX problem

1. If I take this transform: rotatex(0) out of tr:hover td, the tool tip breaks. 2. tr:active td selector doesn't work in IE11

by CoolBlue

HTML

<body>
    <table border="0" width="75%" draggable="false">
        <tr id="header">
            <th><b>COL1</b></th>
            <th><b>COL2</b></th>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
    </table>
</body>

CSS

/*Striped background to show transparency */
body{
		background-image: linear-gradient(black 10%, transparent 10%);
		background-size: auto 10px;
}
/*Base format*/
table {
	float: left;
	table-layout: auto;
	border-collapse: seperate;
	border-spacing: 1px 0;
	text-align: left;
	cursor: default;
}
td {

	/*Fix 1 ?????????????????????????????????????????????????????????????*/
	position: relative;
	/*???????????????????????????????????????????????????????????????????*/

	/*Dynamic elements*/
	background-image: linear-gradient(to top, #0033CC, #FFFFDB);
	opacity: 0.5;
}

/* Header*/
	th {
		padding-left: 1%; /*not inherited from table*/
		width: 50%;
		color: #FFFF66;
		background-color: #0000CC;
	}
	tr:active th {
		opacity: 0.5;
		color: red;
	}

/* Tool tip base*/
	/*body*/
	tr:hover td:last-child:after, tr:active td:last-child:after {
		white-space: nowrap;
		position: absolute;
		left: calc(100% + 6px);
		border-radius: 5px;
		color: black;
	}
	/*pointer*/
	tr:hover td:last-child:before, tr:active td:last-child:before{
		/*make a little arrow beside the tool tip */
		content: '';
		border: solid;
		width: 0; height: 0;
		border-color: transparent #cacae1 transparent transparent;
		border-width: 6px 6px 6px 0;
		bottom: calc(50% - 6px);
		left: 100%;
		position: absolute;
	}

/*Row hover*/
	tr:hover td {
		/*transform background gradient*/
		background: linear-gradient(to top,#4D70DB,#FFFF00);
		/*transform opacity for the element*/
		opacity: 0.8;

		/*Fix 2 ?????????????????????????????????????????????????????????????*/
		transform: rotateX(0);
		/*???????????????????????????????????????????????????????????????????*/
	}
	/* adjust tool tip */
	tr:hover td:last-child:after {
		content: 'Click to SELECT';
		box-shadow: 0 0 8px #FFFF00;
		background-image: linear-gradient(to top,#4D70DB,#FFFF00);
	}

/*Row select*/
	tr:active td {
		opacity: 1.0;
		color: red;
		background-image: linear-gradient(to top,#4D70DB,#FF8585);
	}
	/* adjust tool tip */
	tr:active...