响应式表格,表格自适应(responsive table)
后台管理系统常用到的表格,responsive table就很适用于移动端。<div class="table_grad scroll_tablex"> <table class="table_tab responsive"><tr><th>
·
后台管理系统常用到的表格,responsive table就很适用于移动端。
<div class="table_grad scroll_tablex">
<table class="table_tab responsive">
<tr>
<th><input type="checkbox"></th>
<th>编号</th>
<th>消息</th>
<th>类型</th>
<th>接收时间</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td class="oneline onelineTd">香港奇华饼家有限公司发布了新品“七星伴月冰皮月饼香港奇华饼家有限公司发布了新品“七星伴月冰皮月饼”</td>
<td>新品发布</td>
<td>2016-02-12 17:45</td>
<td>
<span class="tdSpan_btn green_btn" οnclick="editBrand('4028816f5c056c53015c0eb52d04001c','锤子手机','0','香港奇华饼家有限公司发布了新品“七星伴月冰皮月饼香港奇华饼家有限公司发布了新品“七星伴月冰皮月饼”')">去看看</span>
<span class="tdSpan_btn red_btn">删除</span>
</td>
</tr>
</table>
</div>
用到的文件如下:
/* Attach the Table CSS and Javascript */ <link rel="stylesheet" href="responsive-tables.css"> <script src="stylesheet" href="responsive-tables.js"></script>
个人css添加:
.scroll_tablex{width: 100%;overflow-y:scroll; }
.scroll_tablex table{width:auto;min-width: 100%; border:1px solid #e4e4e4; border-collapse:collapse;border-spacing:inherit;white-space: nowrap;}
.scroll_tablex table tr td{border: 1px solid #e4e4e4;padding: 5px;text-align: center;font-size: 12px;position: relative;height: 32px;border-bottom:0;border-top: 0;min-width: 60px;}
更多推荐
已为社区贡献1条内容
所有评论(0)