89 lines
2.4 KiB
CSS
89 lines
2.4 KiB
CSS
/*
|
|
Styles for the table columntoggle mode
|
|
*/
|
|
.ui-table-reflow td .ui-table-cell-label,
|
|
.ui-table-reflow th .ui-table-cell-label {
|
|
display: none;
|
|
}
|
|
|
|
/* Mobile first styles: Begin with the stacked presentation at narrow widths */
|
|
@media only all {
|
|
/* Hide the table headers */
|
|
.ui-table-reflow thead td,
|
|
.ui-table-reflow thead th {
|
|
display: none;
|
|
}
|
|
/* Show the table cells as a block level element */
|
|
.ui-table-reflow td,
|
|
.ui-table-reflow th {
|
|
text-align: left;
|
|
display: block;
|
|
}
|
|
/* Add a fair amount of top margin to visually separate each row when stacked */
|
|
.ui-table-reflow tbody th {
|
|
margin-top: 3em;
|
|
}
|
|
/* Make the label elements a percentage width */
|
|
.ui-table-reflow td .ui-table-cell-label,
|
|
.ui-table-reflow th .ui-table-cell-label {
|
|
display: block;
|
|
padding: .4em;
|
|
min-width: 30%;
|
|
display: inline-block;
|
|
margin: -.4em 1em -.4em -.4em;
|
|
}
|
|
/* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
|
|
.ui-table-reflow th .ui-table-cell-label-top,
|
|
.ui-table-reflow td .ui-table-cell-label-top {
|
|
display: block;
|
|
padding: .4em 0;
|
|
margin: .4em 0;
|
|
text-transform: uppercase;
|
|
font-size: .9em;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
|
|
/* Breakpoint to show as a standard table at 560px (35em x 16px) or wider */
|
|
@media ( min-width: 35em ) {
|
|
|
|
/* Fixes table rendering when switching between breakpoints in Safari <= 5. See https://github.com/jquery/jquery-mobile/issues/5380 */
|
|
.ui-table-reflow.ui-responsive {
|
|
display: table-row-group;
|
|
}
|
|
|
|
/* Show the table header rows */
|
|
.ui-table-reflow.ui-responsive td,
|
|
.ui-table-reflow.ui-responsive th,
|
|
.ui-table-reflow.ui-responsive tbody th,
|
|
.ui-table-reflow.ui-responsive tbody td,
|
|
.ui-table-reflow.ui-responsive thead td,
|
|
.ui-table-reflow.ui-responsive thead th {
|
|
display: table-cell;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Hide the labels in each cell */
|
|
.ui-table-reflow.ui-responsive td .ui-table-cell-label,
|
|
.ui-table-reflow.ui-responsive th .ui-table-cell-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* Hack to make IE9 and WP7.5 treat cells like block level elements, scoped to ui-responsive class */
|
|
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/
|
|
@media ( max-width: 35em ) {
|
|
.ui-table-reflow.ui-responsive td,
|
|
.ui-table-reflow.ui-responsive th {
|
|
width: 100%;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
float: left;
|
|
clear: left;
|
|
}
|
|
}
|
|
|