- DataTables has its bJQueryUI / jQueryUI option which will automatically enable jQuery styling options which are built into DataTables, however this option is depricated in 1.10 and will be removed in 1.11 to keep all integrations independent of the core (i.e. jQuery UI will be just the same as Bootstrap, Foundation and others). - As a result of jQueryUI option being removed in 1.11 and depricated in 1.10 I want people to be able to use the new method of doing things immediately, rather than needing to rely upon a depricated option. This files provide the integration needed for jQuery UIpull/40/head
Allan Jardine
11 years ago
parent
45c45f9b41
commit
fcd3b3cf0d
@ -0,0 +1,316 @@
|
||||
/*
|
||||
* Table styles
|
||||
*/
|
||||
table.dataTable {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
/*
|
||||
* Header and footer styles
|
||||
*/
|
||||
/*
|
||||
* Body styles
|
||||
*/
|
||||
}
|
||||
table.dataTable thead th,
|
||||
table.dataTable thead td,
|
||||
table.dataTable tfoot th,
|
||||
table.dataTable tfoot td {
|
||||
padding: 4px 10px;
|
||||
}
|
||||
table.dataTable thead th,
|
||||
table.dataTable tfoot th {
|
||||
font-weight: bold;
|
||||
}
|
||||
table.dataTable thead th:active,
|
||||
table.dataTable thead td:active {
|
||||
outline: none;
|
||||
}
|
||||
table.dataTable thead .sorting_asc,
|
||||
table.dataTable thead .sorting_desc,
|
||||
table.dataTable thead .sorting {
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
}
|
||||
table.dataTable thead th div.DataTables_sort_wrapper {
|
||||
position: relative;
|
||||
padding-right: 10px;
|
||||
}
|
||||
table.dataTable thead th div.DataTables_sort_wrapper span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
right: -5px;
|
||||
}
|
||||
table.dataTable thead th.ui-state-default {
|
||||
border-right-width: 0;
|
||||
}
|
||||
table.dataTable thead th.ui-state-default:last-child {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
table.dataTable tbody tr {
|
||||
background-color: white;
|
||||
}
|
||||
table.dataTable tbody tr.selected {
|
||||
background-color: #b0bed9;
|
||||
}
|
||||
table.dataTable tbody th,
|
||||
table.dataTable tbody td {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
table.dataTable th.center,
|
||||
table.dataTable td.center,
|
||||
table.dataTable td.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
table.dataTable th.right,
|
||||
table.dataTable td.right {
|
||||
text-align: right;
|
||||
}
|
||||
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
|
||||
border-top: 1px solid #dddddd;
|
||||
}
|
||||
table.dataTable.row-border tbody tr:first-child th,
|
||||
table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th,
|
||||
table.dataTable.display tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
|
||||
border-top: 1px solid #dddddd;
|
||||
border-right: 1px solid #dddddd;
|
||||
}
|
||||
table.dataTable.cell-border tbody tr th:first-child,
|
||||
table.dataTable.cell-border tbody tr td:first-child {
|
||||
border-left: 1px solid #dddddd;
|
||||
}
|
||||
table.dataTable.cell-border tbody tr:first-child th,
|
||||
table.dataTable.cell-border tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
|
||||
background-color: #abb9d3;
|
||||
}
|
||||
table.dataTable.hover tbody tr:hover,
|
||||
table.dataTable.hover tbody tr.odd:hover,
|
||||
table.dataTable.hover tbody tr.even:hover, table.dataTable.display tbody tr:hover,
|
||||
table.dataTable.display tbody tr.odd:hover,
|
||||
table.dataTable.display tbody tr.even:hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
table.dataTable.hover tbody tr:hover.selected,
|
||||
table.dataTable.hover tbody tr.odd:hover.selected,
|
||||
table.dataTable.hover tbody tr.even:hover.selected, table.dataTable.display tbody tr:hover.selected,
|
||||
table.dataTable.display tbody tr.odd:hover.selected,
|
||||
table.dataTable.display tbody tr.even:hover.selected {
|
||||
background-color: #a9b7d1;
|
||||
}
|
||||
table.dataTable.order-column tbody tr > .sorting_1,
|
||||
table.dataTable.order-column tbody tr > .sorting_2,
|
||||
table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
|
||||
table.dataTable.display tbody tr > .sorting_2,
|
||||
table.dataTable.display tbody tr > .sorting_3 {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
table.dataTable.order-column tbody tr.selected > .sorting_1,
|
||||
table.dataTable.order-column tbody tr.selected > .sorting_2,
|
||||
table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
|
||||
table.dataTable.display tbody tr.selected > .sorting_2,
|
||||
table.dataTable.display tbody tr.selected > .sorting_3 {
|
||||
background-color: #acbad4;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
|
||||
background-color: #a6b3cd;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
|
||||
background-color: #a7b5ce;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
|
||||
background-color: #a9b6d0;
|
||||
}
|
||||
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
|
||||
background-color: #fdfdfd;
|
||||
}
|
||||
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
|
||||
background-color: #acbad4;
|
||||
}
|
||||
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
|
||||
background-color: #adbbd6;
|
||||
}
|
||||
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
|
||||
background-color: #afbdd8;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover > .sorting_1,
|
||||
table.dataTable.display tbody tr.odd:hover > .sorting_1,
|
||||
table.dataTable.display tbody tr.even:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
|
||||
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_1,
|
||||
table.dataTable.order-column.hover tbody tr.even:hover > .sorting_1 {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover > .sorting_2,
|
||||
table.dataTable.display tbody tr.odd:hover > .sorting_2,
|
||||
table.dataTable.display tbody tr.even:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2,
|
||||
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_2,
|
||||
table.dataTable.order-column.hover tbody tr.even:hover > .sorting_2 {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover > .sorting_3,
|
||||
table.dataTable.display tbody tr.odd:hover > .sorting_3,
|
||||
table.dataTable.display tbody tr.even:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3,
|
||||
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_3,
|
||||
table.dataTable.order-column.hover tbody tr.even:hover > .sorting_3 {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover.selected > .sorting_1,
|
||||
table.dataTable.display tbody tr.odd:hover.selected > .sorting_1,
|
||||
table.dataTable.display tbody tr.even:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1,
|
||||
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_1,
|
||||
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_1 {
|
||||
background-color: #a1aec7;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover.selected > .sorting_2,
|
||||
table.dataTable.display tbody tr.odd:hover.selected > .sorting_2,
|
||||
table.dataTable.display tbody tr.even:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2,
|
||||
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_2,
|
||||
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_2 {
|
||||
background-color: #a2afc8;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover.selected > .sorting_3,
|
||||
table.dataTable.display tbody tr.odd:hover.selected > .sorting_3,
|
||||
table.dataTable.display tbody tr.even:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3,
|
||||
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_3,
|
||||
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_3 {
|
||||
background-color: #a4b2cb;
|
||||
}
|
||||
|
||||
table.dataTable,
|
||||
table.dataTable th,
|
||||
table.dataTable td {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Control feature layout
|
||||
*/
|
||||
.dataTables_wrapper {
|
||||
position: relative;
|
||||
clear: both;
|
||||
*zoom: 1;
|
||||
zoom: 1;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_length {
|
||||
float: left;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_filter {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_filter input {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_info {
|
||||
clear: both;
|
||||
float: left;
|
||||
padding-top: 0.55em;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .fg-button {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
min-width: 1.5em;
|
||||
padding: 0.5em;
|
||||
margin-left: 2px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
color: #333333 !important;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .fg-button:active {
|
||||
outline: none;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .fg-button:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .fg-button:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-left: -50%;
|
||||
margin-top: -25px;
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
background-color: white;
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
|
||||
/* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
/* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
/* FF3.6+ */
|
||||
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
/* IE10+ */
|
||||
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
/* Opera 11.10+ */
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
/* W3C */
|
||||
}
|
||||
.dataTables_wrapper .dataTables_length,
|
||||
.dataTables_wrapper .dataTables_filter,
|
||||
.dataTables_wrapper .dataTables_info,
|
||||
.dataTables_wrapper .dataTables_processing,
|
||||
.dataTables_wrapper .dataTables_paginate {
|
||||
color: #333333;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_scroll {
|
||||
clear: both;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_scrollBody {
|
||||
*margin-top: -1px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.dataTables_wrapper .ui-widget-header {
|
||||
font-weight: normal;
|
||||
}
|
||||
.dataTables_wrapper .ui-toolbar {
|
||||
padding: 8px;
|
||||
}
|
||||
.dataTables_wrapper:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
@ -0,0 +1,102 @@
|
||||
|
||||
(function(){
|
||||
|
||||
var DataTable = $.fn.dataTable;
|
||||
var sort_prefix = 'css_right ui-icon ui-icon-';
|
||||
var toolbar_prefix = 'fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-';
|
||||
|
||||
/* Set the defaults for DataTables initialisation */
|
||||
$.extend( true, DataTable.defaults, {
|
||||
dom:
|
||||
'<"'+toolbar_prefix+'tl ui-corner-tr"lfr>'+
|
||||
't'+
|
||||
'<"'+toolbar_prefix+'bl ui-corner-br"ip>',
|
||||
renderer: 'jqueryui'
|
||||
} );
|
||||
|
||||
|
||||
$.extend( DataTable.ext.classes, {
|
||||
/* Full numbers paging buttons */
|
||||
"sPageButton": "fg-button ui-button ui-state-default",
|
||||
"sPageButtonActive": "ui-state-disabled",
|
||||
"sPageButtonDisabled": "ui-state-disabled",
|
||||
|
||||
/* Features */
|
||||
"sPaging": "dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi "+
|
||||
"ui-buttonset-multi paging_", /* Note that the type is postfixed */
|
||||
|
||||
/* Sorting */
|
||||
"sSortAsc": "ui-state-default sorting_asc",
|
||||
"sSortDesc": "ui-state-default sorting_desc",
|
||||
"sSortable": "ui-state-default sorting",
|
||||
"sSortableAsc": "ui-state-default sorting_asc_disabled",
|
||||
"sSortableDesc": "ui-state-default sorting_desc_disabled",
|
||||
"sSortableNone": "ui-state-default sorting_disabled",
|
||||
"sSortIcon": "DataTables_sort_icon",
|
||||
|
||||
/* Scrolling */
|
||||
"sScrollHead": "dataTables_scrollHead "+"ui-state-default",
|
||||
"sScrollFoot": "dataTables_scrollFoot "+"ui-state-default",
|
||||
|
||||
/* Misc */
|
||||
"sHeaderTH": "ui-state-default",
|
||||
"sFooterTH": "ui-state-default",
|
||||
} );
|
||||
|
||||
|
||||
DataTable.ext.renderer.header.jqueryui = function ( settings, cell, column, idx, classes ) {
|
||||
$('<div/>')
|
||||
.addClass( 'DataTables_sort_wrapper' )
|
||||
.append( cell.contents() )
|
||||
.append( $('<span/>')
|
||||
.addClass( classes.sSortIcon+' '+column.sSortingClassJUI )
|
||||
)
|
||||
.appendTo( cell );
|
||||
|
||||
// Attach a sort listener to update on sort
|
||||
$(settings.nTable).on( 'order.dt', function ( e, settings, sorting, columns ) {
|
||||
cell
|
||||
.removeClass( classes.sSortAsc +" "+classes.sSortDesc )
|
||||
.addClass( columns[ idx ] == 'asc' ?
|
||||
classes.sSortAsc : columns[ idx ] == 'desc' ?
|
||||
classes.sSortDesc :
|
||||
column.sSortingClass
|
||||
);
|
||||
|
||||
cell
|
||||
.find( 'span' )
|
||||
.removeClass(
|
||||
sort_prefix+'triangle-1-n' +" "+
|
||||
sort_prefix+'triangle-1-s' +" "+
|
||||
sort_prefix+'carat-2-n-s' +" "+
|
||||
sort_prefix+'carat-1-n' +" "+
|
||||
sort_prefix+'carat-1-s'
|
||||
)
|
||||
.addClass( columns[ idx ] == 'asc' ?
|
||||
sort_prefix+'triangle-1-n' : columns[ idx ] == 'desc' ?
|
||||
sort_prefix+'triangle-1-s' :
|
||||
column.sSortingClassJUI
|
||||
);
|
||||
} );
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* TableTools jQuery UI compatibility
|
||||
* Required TableTools 2.1+
|
||||
*/
|
||||
if ( DataTable.TableTools ) {
|
||||
$.extend( true, DataTable.TableTools.classes, {
|
||||
"container": "DTTT_container ui-buttonset ui-buttonset-multi",
|
||||
"buttons": {
|
||||
"normal": "DTTT_button ui-button ui-state-default"
|
||||
},
|
||||
"collection": {
|
||||
"container": "DTTT_collection ui-buttonset ui-buttonset-multi"
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
|
||||
}());
|
||||
|
||||
@ -0,0 +1,408 @@
|
||||
|
||||
|
||||
//
|
||||
// Colour customisation
|
||||
//
|
||||
|
||||
// Border between the header (and footer) and the table body
|
||||
$table-header-border: 1px solid #111;
|
||||
|
||||
// Border of rows / cells
|
||||
$table-body-border: 1px solid #ddd;
|
||||
|
||||
// Row background colour (hover, striping etc are all based on this colour and
|
||||
// calculated automatically)
|
||||
$table-row-background: #ffffff;
|
||||
|
||||
// Row colour, when selected (tr.selected)
|
||||
$table-row-selected: #B0BED9;
|
||||
|
||||
// Text colour of the interaction control elements (info, filter, paging etc)
|
||||
$table-control-color: #333;
|
||||
|
||||
// Highlight colour of the paging button for the current page
|
||||
$table-paging-button-active: #dcdcdc;
|
||||
|
||||
// Hover colour of paging buttons on mouse over
|
||||
$table-paging-button-hover: #111;
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Functions / mixins
|
||||
//
|
||||
@function tint( $color, $percent ) {
|
||||
@return mix(white, $color, $percent);
|
||||
}
|
||||
|
||||
@function shade( $color, $percent ) {
|
||||
@return mix(black, $color, $percent);
|
||||
}
|
||||
|
||||
@mixin gradient( $from, $to ) {
|
||||
background-color: $from;
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, $from 0%, $to 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(top, $from 0%, $to 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient(top, $from 0%, $to 100%); /* IE10+ */
|
||||
background: -o-linear-gradient(top, $from 0%, $to 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient(to bottom, $from 0%, $to 100%); /* W3C */
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Table styles
|
||||
*/
|
||||
table.dataTable {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
|
||||
/*
|
||||
* Header and footer styles
|
||||
*/
|
||||
thead,
|
||||
tfoot {
|
||||
th,
|
||||
td {
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
thead th,
|
||||
thead td {
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Sorting
|
||||
thead {
|
||||
.sorting_asc,
|
||||
.sorting_desc,
|
||||
.sorting {
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
}
|
||||
|
||||
th div.DataTables_sort_wrapper {
|
||||
position: relative;
|
||||
padding-right: 10px;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
right: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
th.ui-state-default {
|
||||
border-right-width: 0;
|
||||
|
||||
&:last-child {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Body styles
|
||||
*/
|
||||
tbody {
|
||||
tr {
|
||||
background-color: $table-row-background;
|
||||
|
||||
&.selected {
|
||||
background-color: $table-row-selected;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
th.center,
|
||||
td.center,
|
||||
td.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th.right,
|
||||
td.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
// Stripe classes - add "row-border" class to the table to activate
|
||||
&.row-border tbody,
|
||||
&.display tbody {
|
||||
th, td {
|
||||
border-top: $table-body-border;
|
||||
}
|
||||
|
||||
tr:first-child th,
|
||||
tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Stripe classes - add "cell-border" class to the table to activate
|
||||
&.cell-border tbody {
|
||||
th, td {
|
||||
border-top: $table-body-border;
|
||||
border-right: $table-body-border;
|
||||
}
|
||||
|
||||
tr th:first-child,
|
||||
tr td:first-child {
|
||||
border-left: $table-body-border;
|
||||
}
|
||||
|
||||
tr:first-child th,
|
||||
tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Stripe classes - add "stripe" class to the table to activate
|
||||
&.stripe tbody,
|
||||
&.display tbody {
|
||||
tr.odd {
|
||||
background-color: shade($table-row-background, 2.35%); // shade by f9
|
||||
|
||||
&.selected {
|
||||
background-color: shade($table-row-selected, 2.35%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Hover classes - add "hover" class to the table to activate
|
||||
&.hover tbody,
|
||||
&.display tbody {
|
||||
tr:hover,
|
||||
tr.odd:hover,
|
||||
tr.even:hover {
|
||||
background-color: shade($table-row-background, 3.6%); // shade by f5
|
||||
|
||||
&.selected {
|
||||
background-color: shade($table-row-selected, 3.6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Sort column highlighting - add "hover" class to the table to activate
|
||||
&.order-column,
|
||||
&.display {
|
||||
tbody {
|
||||
tr>.sorting_1,
|
||||
tr>.sorting_2,
|
||||
tr>.sorting_3 {
|
||||
background-color: shade($table-row-background, 2%); // shade by fa
|
||||
}
|
||||
|
||||
tr.selected>.sorting_1,
|
||||
tr.selected>.sorting_2,
|
||||
tr.selected>.sorting_3 {
|
||||
background-color: shade($table-row-selected, 2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.display tbody,
|
||||
&.order-column.stripe tbody {
|
||||
tr.odd {
|
||||
>.sorting_1 { background-color: shade($table-row-background, 5.4%); } // shade by f1
|
||||
>.sorting_2 { background-color: shade($table-row-background, 4.7%); } // shade by f3
|
||||
>.sorting_3 { background-color: shade($table-row-background, 3.9%); } // shade by f5
|
||||
|
||||
&.selected {
|
||||
>.sorting_1 { background-color: shade($table-row-selected, 5.4%); }
|
||||
>.sorting_2 { background-color: shade($table-row-selected, 4.7%); }
|
||||
>.sorting_3 { background-color: shade($table-row-selected, 3.9%); }
|
||||
}
|
||||
}
|
||||
|
||||
tr.even {
|
||||
>.sorting_1 { background-color: shade($table-row-background, 2%); } // shade by fa
|
||||
>.sorting_2 { background-color: shade($table-row-background, 1.2%); } // shade by fc
|
||||
>.sorting_3 { background-color: shade($table-row-background, 0.4%); } // shade by fe
|
||||
|
||||
&.selected {
|
||||
>.sorting_1 { background-color: shade($table-row-selected, 2%); }
|
||||
>.sorting_2 { background-color: shade($table-row-selected, 1.2%); }
|
||||
>.sorting_3 { background-color: shade($table-row-selected, 0.4%); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.display tbody,
|
||||
&.order-column.hover tbody {
|
||||
tr:hover,
|
||||
tr.odd:hover,
|
||||
tr.even:hover {
|
||||
>.sorting_1 { background-color: shade($table-row-background, 8.2%); } // shade by ea
|
||||
>.sorting_2 { background-color: shade($table-row-background, 7.5%); } // shade by ec
|
||||
>.sorting_3 { background-color: shade($table-row-background, 6.3%); } // shade by ef
|
||||
|
||||
&.selected {
|
||||
>.sorting_1 { background-color: shade($table-row-selected, 8.2%); }
|
||||
>.sorting_2 { background-color: shade($table-row-selected, 7.5%); }
|
||||
>.sorting_3 { background-color: shade($table-row-selected, 6.3%); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Its not uncommon to use * {border-box} now, but it messes up the column width
|
||||
// calculations, so use content-box for the table and cells
|
||||
table.dataTable,
|
||||
table.dataTable th,
|
||||
table.dataTable td {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Control feature layout
|
||||
*/
|
||||
.dataTables_wrapper {
|
||||
position: relative;
|
||||
clear: both;
|
||||
*zoom: 1;
|
||||
|
||||
// Page length options
|
||||
.dataTables_length {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Filtering input
|
||||
.dataTables_filter {
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
input {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Table info
|
||||
.dataTables_info {
|
||||
clear: both;
|
||||
float: left;
|
||||
padding-top: 0.55em;
|
||||
}
|
||||
|
||||
// Paging
|
||||
.dataTables_paginate {
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
.fg-button {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
min-width: 1.5em;
|
||||
padding: 0.5em;
|
||||
margin-left: 2px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
|
||||
color: $table-control-color !important;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fg-button:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
.fg-button:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// Processing
|
||||
.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-left: -50%;
|
||||
margin-top: -25px;
|
||||
padding-top: 20px;
|
||||
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
|
||||
background-color: white;
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba($table-row-background, 0)), color-stop(25%,rgba($table-row-background, 0.9)), color-stop(75%,rgba($table-row-background, 0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(left, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(left, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient(left, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* IE10+ */
|
||||
background: -o-linear-gradient(left, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient(to right, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* W3C */
|
||||
}
|
||||
|
||||
.dataTables_length,
|
||||
.dataTables_filter,
|
||||
.dataTables_info,
|
||||
.dataTables_processing,
|
||||
.dataTables_paginate {
|
||||
color: $table-control-color;
|
||||
}
|
||||
|
||||
// Scrolling
|
||||
.dataTables_scroll {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.dataTables_scrollBody {
|
||||
*margin-top: -1px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
|
||||
.ui-widget-header {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.ui-toolbar {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
// Self clear the wrapper
|
||||
&:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
zoom: 1; // Poor old IE
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,443 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
|
||||
<title>DataTables jQuery UI example</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
|
||||
<link rel="stylesheet" type="text/css" href="dataTables.jqueryui.css">
|
||||
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
<!--<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10-dev/js/jquery.dataTables.js"></script>-->
|
||||
<script type="text/javascript" language="javascript" src="/dataTables/DataTablesSrc/built/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="dataTables.jqueryui.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#example').dataTable();
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="odd gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 4.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center"> 4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue