экспромт на заданную тему
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{height:1000px;background:#FF8C00;font-family:Georgia,"Times New Roman",Times,serif;letter-spacing:1px}
.git{width:700px;margin:0px auto}
div{height:250px}
td{background:#000}
td,th{border:1px solid #555555;color:#FFF;padding:10px;text-align:left}
.zebra tr:nth-child(2n) td{background:#383838}
tr:nth-child(1) td:hover,tr:nth-child(1) th:hover{background-image:-webkit-gradient(linear,top,bottom,color-stop(0,#E6E6FA),color-stop(1,#696969));background-image:-ms-linear-gradient(top,#E6E6FA,#696969);background-image:-o-linear-gradient(top,#E6E6FA,#696969);background-image:-moz-linear-gradient(top,#E6E6FA,#696969);background-image:-webkit-linear-gradient(top,#E6E6FA,#696969);background:linear-gradient(to bottom,#E6E6FA,#696969)}
tr:nth-child(1) td,tr:nth-child(1) th{font-weight:bold;background-image:-webkit-gradient(linear,left,right,color-stop(0,#00008B),color-stop(1,#0060BF));background-image:-ms-linear-gradient(left,#00008B,#0060BF);background-image:-o-linear-gradient(left,#00008B,#0060BF);background-image:-moz-linear-gradient(left,#00008B,#0060BF);background-image:-webkit-linear-gradient(left,#00008B,#0060BF);background:linear-gradient(to right,#00008B,#0060BF)}
.zebra tr:nth-child(n +2):hover td{background-image:-webkit-gradient(linear,left,right,color-stop(0,#D2691E),color-stop(1,#DEB887));background-image:-ms-linear-gradient(left,#D2691E,#DEB887);background-image:-o-linear-gradient(left,#D2691E,#DEB887);background-image:-moz-linear-gradient(left,#D2691E,#DEB887);background-image:-webkit-linear-gradient(left,#D2691E,#DEB887);background:linear-gradient(to right,#D2691E,#DEB887)}
table{border-collapse:collapse;border-spacing:0;box-shadow:0 2px 1px 5px rgba(242,242,242,0.1);width:100%}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function () {
$("table").tablework();
});
$.fn.tablework = function() {
return this.each(function() {
var $table = $(this),
$thead = $table.find('thead');
!$thead.length && ($thead = $('<thead/>').prependTo($table));
var $tr = $('<tr/>').prependTo($thead),
hide = {};
$("tbody tr:first>", $table).each(function(indx, element) {
var range = ['Без выбора'],
$td = $("tbody tr :nth-of-type(" + (indx + 1) + ")", $table),
temp = {};
$td.each(function(i, el) {
var text = $(this).text()
if (!temp[text]) {
range.unshift(text);
temp[text] = true
};
});
var $select = $('<select/>', {
'change': function() {
var val = this.value;
hide[indx] = [];
this.selectedIndex && $td.each(function(i, el) {
$(this).text() != val && hide[indx].push(i)
});
var range = [];
for (var k in hide) range = range.concat(hide[k]);
var $tr = $("tbody tr", $table);
$tr.show();
$.each(range, function(i, el) {
$tr.eq(el).hide()
});
}
});
$.each(range, function() {
$('<option/>', {
text: this
}).prependTo($select);
});
$('<td/>').append($select).appendTo($tr);
});
});
};
</script>
</head>
<body>
<br>
<table class="zebra git" >
<tbody>
<tr class="t_head" id="1">
<th style="width: 70px;">Период</th>
<th style="width: 15px;">test</th>
<th>DBL</th>
<th>SGL</th>
</tr>
<tr>
<td>Date</td>
<td>Start time</td>
<td>End time</td>
<td>Name</td>
</tr>
<tr>
<td>02.06.2010</td>
<td>10:00</td>
<td>12:00</td>
<td>Cleaning</td>
</tr>
<tr>
<td>02.06.2010</td>
<td>12:00</td>
<td>15:00</td>
<td>Training</td>
</tr>
<tr>
<td>02.06.2010</td>
<td>15:00</td>
<td>17:00</td>
<td>Rest</td>
</tr>
<tr>
<td>02.06.2010</td>
<td>17:00</td>
<td>21:00</td>
<td>Work</td>
</tr>
<tr>
<td>02.06.2010</td>
<td>21:00</td>
<td>07:00</td>
<td>Sleep</td>
</tr>
</tbody>
</table>
</body>
</html>
