真正意义上的响应式表格

响应式表格，一开始我使用的是bootstrap中的css样式，但是后来发现在移动端的效果很烂，或者我处理的不太好吧（容易因为内容过长导致布局难看）。

偶然看到一篇文章，通过媒体查询来改变布局，先看效果图：

移动端显示效果：

直接贴上css代码

    <style type="text/css">
        @media screen and (max-width: 600px)
        {
            table
            {
                border: 0;
            }
        
            table thead
            {
                display: none;
            }
        
            table tr
            {
                margin-bottom: 10px;
                display: block;
                border-bottom: 2px solid #ddd;
            }
        
            table td
            {
                display: block;
                text-align: right;
                font-size: 13px;
                border-bottom: 1px dotted #ccc;
            }
        
            table td:last-child
            {
                border-bottom: 0;
            }
        
            table td:before
            {
                content: attr(data-label);
                float: left;
                text-transform: uppercase;
                font-weight: bold;
            }
        }
    </style>

<table class=" table table-bordered table-hover ">
            <thead>
                <tr>
                    <th>
                        支付
                    </th>
                    <th>
                        日期
                    </th>
                    <th>
                        金额
                    </th>
                    <th>
                        周期
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-label="支付">
                        支付 #1
                    </td>
                    <td data-label="日期">
                        02/01/2015
                    </td>
                    <td data-label="金额">
                        ￥2,311
                    </td>
                    <td data-label="周期">
                        01/01/2015 - 01/31/2015
                    </td>
                </tr>
                <tr>
                    <td data-label="支付">
                        支付 #2
                    </td>
                    <td data-label="日期">
                        03/01/2015
                    </td>
                    <td data-label="金额">
                        ￥3,211
                    </td>
                    <td data-label="周期">
                        02/01/2015 - 02/28/2015
                    </td>
                </tr>
            </tbody>
        </table>

__________________________________________________________________________

Asp.net动态加载Table,可以与ListView向结合

可以根据需要自定义css样式，使布局控件布局美观得体

            <asp:ListView ID="lstView_Menu" runat="server">
                <LayoutTemplate>
                    <table class=" table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>
                                    菜单名称
                                </th>
                                <th>
                                    菜单等级
                                </th>
                                <th>
                                    排序
                                </th>
                                <th>
                                    Url地址
                                </th>
                                <th>
                                    使用状态
                                </th>
                                <th>
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
                        </tbody>
                    </table>
                </LayoutTemplate>
                <ItemTemplate>
                    <tr>
                        <td data-label="菜单名称">
                            <%# Eval("menuName")%>
                        </td>
                        <td data-label="菜单等级">
                            <%# Eval("menuLevel")%>
                        </td>
                        <td data-label="排序">
                            <%# Eval("menuSort")%>
                        </td>
                        <td data-label="Url地址">
                            <%# Eval("menuUrl")%>
                        </td>
                        <td data-label="使用状态">
                            <%# Eval("isEnabled").ToString()=="0"?"禁用中":"使用中"   %>
                        </td>
                        <td data-label="操作" class="doChange">
                            <a href='javascript:editInfo(<%# Eval("id") %>)' class=" btn btn-success btn-xs">编辑</a>  <a
                                href='javascript:changeStatus(<%# Eval("id") %>)' class=" btn btn-info btn-xs">
                                <%# Eval("isEnabled").ToString()=="0"?"启用":"禁用"   %></a>  <a href='javascript:deleteInfo(<%# Eval("id") %>)'
                                    class=" btn  btn-warning btn-xs">删除</a>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:ListView>