}
/* 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代码如下：
| Date |
Description |
Category |
Points |
@foreach (var e in @Model.Events) {
Date
@e.DateForDisplay
| @if (e.HasLink) {
Description
| } else {
Description
@e.Description
| }
Category
Earn
|
Points
@e.Value
|
}
|