真正意义上的响应式表格

来源：互联网发布：js encodeuri 调用两次编辑：程序博客网时间：2024/05/17 09:13

响应式表格，一开始我使用的是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>

0 0