设为首页 加入收藏

TOP

Responsive design for tables(一)
2015-07-20 17:46:40 来源: 作者: 【 】 浏览:5
Tags: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;

首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇EasyUI实现异步加载tree(整合Stru.. 下一篇POJ 1741 Tree 树形DP(分治)

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

·C语言中如何将结构体 (2025-12-24 22:20:09)
·纯C语言结构体成员变 (2025-12-24 22:20:06)
·C语言中,指针函数和 (2025-12-24 22:20:03)
·哈希表 - 菜鸟教程 (2025-12-24 20:18:55)
·MySQL存储引擎InnoDB (2025-12-24 20:18:53)