Responsive design for tables - c++编程基础

}
/* 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代码如下：

@foreach (var e in @Model.Events) { @if (e.HasLink) { } else { } }

Date	Description	Category	Points
Date @e.DateForDisplay	Description @e.Description	Description @e.Description	Category Earn	Points @e.Value

Responsive design for tables(二)