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>