响应式表格，表格自适应（responsive table）

后台管理系统常用到的表格，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;}