Responsive design for tables
运用本文的CSS 可以是table变成响应式设计
CSS代码如下：
/* -----------------------------------------
Table - Clickable row fakery
----------------------------------------- */
/* Generic table style - app overwrites */
table {
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
width:100%;
}
table thead tr th {
color: #202020;
height: 30px;
font-size: 15px;
font-weight: bold;
background-color: #FFF;
border-bottom: 1px solid #DDD;
border-right: 1px solid #DDD;
background: -o-linear-gradient(0deg , rgb(238,238,238) 0%, rgb(255,255,255) 60%);
background: -moz-linear-gradient(90deg , rgb(238,238,238) 0%, rgb(255,255,255) 60%);
background: -webkit-linear-gradient(90deg , rgb(238,238,238) 0%, rgb(255,255,255) 60%);
background: -ms-linear-gradient(0deg , rgb(238,238,238) 0%, rgb(255,255,255) 60%);
background: linear-gradient(0deg , rgb(238,238,238) 0%, rgb(255,255,255) 60%);
}
table thead tr th:hover {
color: #989998;
}
table tbody tr td{
color: #444444;
border-right: 1px solid #DDD;
table-layout: collapsed;
}
table tbody tr td {border-bottom: 1px solid #e4e4e4;}
td.noBottomBorder {border-bottom: none;}
table tr td:last-child {border-right: none;}
table tbody tr:hover{
background: #EEF1F2;
cursor: pointer;
}
table tr:hover{
background-color: #EEF1F2;
}
table tbody tr:nth-child(2n):hover {
background-color: #EEF1F2;
}
table tr:hover td {
color: #444444;
}
table.dataGrid {
border: none;
}
table .empty {
background:white ;
}
.table-cell-right {
text-align: right;
}
/*table tbody tr:last-child td {
border-bottom:none;
}*/
/* Show the table header rows */
.responsive-table td,
.responsive-table th,
.responsive-table tbody th,
.responsive-table tbody td,
.responsive-table thead td,
.responsive-table thead th {
display: table-cell;
margin: 0;
}
/* Hide the labels in each cell */
.responsive-table td .ui-table-cell-label,
.responsive-table th .ui-table-cell-label {
display: none;
}
/* Table - Clickable row fakery */
table tr td a {
display:block;
height:100%;
width:100%;
font-weight: 400;
text-decoration: underline;
}
table tr td a:hover {
text-decoration: none;
}
.earn-history-table .col1{
width: 30%;
}
.earn-history-table .col2{
width: 20%;
}
.earn-history-table .col3{
width: 15%;
}
.earn-history-table .col4{
width: 25%;
}
.earn-history-table .col5{
width: 10%;
}
@media only screen and (max-width: 767px) { /* Start screen styles --- */
table tbody tr td {
border-right: none;
color: #444444;
}
/* These apply across all breakpoints because they are outside of a media query */
/* Make the labels light gray all caps across the board */
.responsive-table thead th,
.responsive-table tbody th .ui-table-cell-label,
.responsive-table tbody td .ui-table-cell-label {
color: rgba(0, 0, 0, 0.5);
display: inline-block;
font-weight: normal;
margin: 0 10px 0 0;
width: 33%;
vertical-align: top;
}
/* White bg, large blue text for rank and title */
.responsive-table tbody th {
font-size: 1.2em;
background-color: #fff;
color: #77bbff;
text-align: center;
}
/* Add a bit of extra left padding for the title */
.responsive-table tbody td.title {
padding-left: .8em;
}
/* Custom stacked styles for mobile sizes */
/* Use a max-width media query so we don't have to undo these styles */
.ui-table-reflow thead td, .ui-table-reflow thead th {
display: none !important;
}
/* Negate the margin between sections */
.responsive-table tbody th {
margin-top: 0;
text-align: left;
}
/* White bg, large blue text for rank and title */
.responsive-table tbody th,
.responsive-table tbody td.title {
display: block;
font-size: 15px;
line-height: 110%;
padding: .5em .5em;
background-color: #EEF1F2;
color: #779665;
}
/* White bg, large blue text for rank and title */
.responsive-table tbody th,
.responsive-table tbody td.title a{
color: white;
}
/* Hide labels for rank and title */
.responsive-table tbody th .ui-table-cell-label,
.responsive-table tbody td.title .ui-table-cell-label {
display: none;
}
/* Position the title next to the rank, pad to the left */
.responsive-table tbody td.title {
margin-top: 0;
padding-left: 10px;
border-bottom: 1px solid rgba(0,0,0,.15);
}
table tbody tr:nth-child(2n) td {
border-bottom: 1px solid rgba(0,0,0,.15);
}
table tbody tr:nth-child(2n) td:last-child {
border-bottom: none;
}
/* Make the data bold */
.responsive-table th,
.responsive-table td {
font-weight: bold;
}
/* Make the label elements a percentage width */
.responsive-table td .ui-table-cell-label,
.responsive-table th .ui-table-cell-label {
min-width: 20%;
}
}
@media ( max-width: 767px ) {
.responsive-table td,
.responsive-table th {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
clear: left;
}
}
.responsive-table td .ui-table-cell-contentInline {
display: inline-block
}
前台HTML代码如下：
<table class="earn-history-table responsive-table ui-table ui-table-reflow" data-role="table" data-mode="reflow">
<thead>
<tr>
<th class="col3" data-priority="1" data-colstart="1">Date</th>
<th class="col1" data-priority="2" data-colstart="2">Description</th>
<th class="col2" data-priority="3" data-colstart="3">Category</th>
<th class="col2" data-priority="4" data-colstart="4">Points</th>
</tr>
</thead>
<tbody>
@foreach (var e in @Model.Events)
{
<tr>
<td class="title">
<b class="ui-table-cell-label">Date</b>
@e.DateForDisplay
</td>
@if (e.HasLink)
{
<td class="col1">
<b class="ui-table-cell-label">Description</b>
<div class="ui-table-cell-contentInline">
<a href="@e.Link">@e.Description</a>
</div>
</td>
}
else
{
<td class="col1">
<b class="ui-table-cell-label">Description</b>
@e.Description
</td>
}
<td class="col1">
<b class="ui-table-cell-label">Category</b>
Earn
</td>
<td class="col1">
<b class="ui-table-cell-label">Points</b>
@e.Value
</td>
</tr>
}
</tbody>
</table>