vitalif-js
/
Fixed-Header-Table
mirror of https://github.com/vitalif/Fixed-Header-Table
1
0
Fork 0
Code Issues Releases Wiki Activity

Added theme to myTheme.css 

Signed-off-by: Mark Malek <markmmalek@me.com>
master
Mark Malek 2011-05-01 15:13:02 -04:00
parent c7858291c9
commit 229d75e6eb
3 changed files with 80 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
css/defaultTheme.css
View File

@ -14,13 +14,13 @@
/* @group Reset */
table.fht-table,
table.fht-table thead,
table.fht-table tfoot,
table.fht-table tbody,
table.fht-table tr,
table.fht-table th,
table.fht-table td {
.fht-table,
.fht-table thead,
.fht-table tfoot,
.fht-table tbody,
.fht-table tr,
.fht-table th,
.fht-table td {
margin: 0;
padding: 0;
@ -29,7 +29,7 @@ table.fht-table td {
vertical-align: baseline;
}
table.fht-table {
.fht-table {
border-collapse: collapse;
border-spacing: 0;
}
@ -38,16 +38,6 @@ table.fht-table {
/* @group Content */
div.fht-temp-div {
width:100px;
height:50px;
overflow: scroll;
}
div.fht-temp-div div {
width: 100%;
height:100px;
}
div.fht-table-wrapper {
overflow: hidden;
}
@ -57,35 +47,9 @@ div.fht-tbody {
overflow-x: hidden;
}
table.fht-table {
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 1em;
color: #050505;
}
table.fht-table .fht-cell {
.fht-table .fht-cell {
overflow: hidden;
height: 1px;
}
/* @end */
/* @group Layout */
table.fht-table thead tr th,
table.fht-table tfoot tr td,
.fht-table-head table thead tr th {
/* appearance */
/* size */
padding: 5px;
/* text */
text-align: left;
}
table.fht-table tbody tr td {
/* size */
padding: 5px;
}
/* @end */

75
css/myTheme.css
View File

@ -1,11 +1,74 @@
.fancyTable td, .fancyTable th {
border: 1px solid #000;
border: 1px solid #778899;
padding: 5px;
}
.fancyTable thead th, .fancyTable tfoot td {
background: #959595;
}
.fancyTable {
/* text */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.fancyTable tbody tr td {
/* appearance */
background-color: #eef2f9;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);
background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));
/* text */
color: #262c31;
font-size: 11px;
}
.fancyTable tbody tr.odd td {
background: #e1e1e1;
}
/* appearance */
background-color: #d6e0ef;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);
background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));
}
.fancyTable thead tr th,
.fancyTable tfoot tr td {
/* appearance */
background-color: #8ca9cf;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);
background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));
/* text */
color: #121517;
font-size: 12px;
font-weight: bold;
text-shadow: 0 1px 1px #e8ebee;
}

4
demo.js
View File

@ -1,5 +1,5 @@
$(document).ready(function() {
$('.myTable').fixedHeaderTable({ width: '600', height: '350', footer: true, altClass: 'odd', themeClass: 'fancyTable' });
$('.myTable').fixedHeaderTable({ width: '600', height: '250', footer: true, altClass: 'odd', themeClass: 'fancyTable' });
$('a.makeTable').bind('click', function() {
@ -9,6 +9,6 @@ $(document).ready(function() {
$('.myTable th, .myTable td')
.css('border', $('#border').val() + 'px solid ' + $('#color').val());
$('.myTable').fixedHeaderTable({ width: $('#width').val(), height: $('#height').val(), footer: true });
$('.myTable').fixedHeaderTable({ width: $('#width').val(), height: $('#height').val(), footer: true, themeClass: 'fancyTable' });
});
});