JSFiddle - React, Tailwind, and code Playground
HTML
<script src="<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>"></script>
<script src="http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js"></script>
<table id='ie_table'>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
</table>
CSS
table#ie_table th {
background-image: -moz-linear-gradient(top, #2A497D, #afcbe7);
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #2A497D),
color-stop(2, #afcbe7));
background-image: linear-gradient(top, #2A497D, #afcbe7);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=1 );
}
JavaScript
$(function() {
if($.browser.msie || 1) {
$('table#ie_table').boxShadow(10, 10, 5, '#888');
/* $('table#ie_table').css({'border': '1px solid black'
});*/
$('table#ie_table th').css('color', 'white');
$('table#ie_table tr:nth-child(even)').css({'background-color':'#ddd'});
$('table#ie_table tr:nth-child(odd)').css({'background-color':'#fff'});
$('table#ie_table tr').hover(
function() {
$(this).css({'background-color':'#FFFFE0'});
},
function() {
$('table#ie_table tr:nth-child(even)').css({'background-color':'#ddd'});
$('table#ie_table tr:nth-child(odd)').css({'background-color':'#fff'});
});
}
});