zoukankan      html  css  js  c++  java
  • 我经常用的一个table样式

    <table id="dt">
        <thead>
            <tr>
                <th style=" 30px;">
                </th>
                <th style=" 200px; padding: 0 3px 0 3px;">
                    书本名称
                </th>
                <th style=" 130px; padding: 0 3px 0 3px;">
                    ISBN编码
                </th>
                <th style=" 130px; padding: 0 3px 0 3px;">
                    作者
                </th>
                <th style=" 380px; padding: 0 3px 0 3px;">
                    出版社
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var od in Model)
            {    
                <tr>
                    <td style=" 30px;">
                        @Html.CheckBox("checkBox", @od.check.ToString() == "True" ? true : false, new { id = od.book.DResID })
                    </td>
                    <td style=" 200px; padding: 0 3px 0 3px;">@od.book.Name
                    </td>
                    <td style=" 130px; padding: 0 3px 0 3px;">@od.book.Code
                    </td>
                    <td style=" 130px; padding: 0 3px 0 3px;">@od.book.Author
                    </td>
                    <td style=" 380px; padding: 0 3px 0 3px;">@od.book.Publishing
                    </td>
                </tr>  
            }
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    @Html.AjaxPager(Model, new PagerOptions()
               {
                   PageIndexParameterName = "id",
                   ShowPageIndexBox = true,
                   PageIndexBoxType = PageIndexBoxType.DropDownList,
                   ShowGoButton = false
               },
                                   new AjaxOptions()
                                   {
                                       UpdateTargetId = "dvOrders",
                                       OnBegin = "alert('Ajax OnBegin事件被触发');",
                                       OnComplete = "alert('Ajax OnComplete事件被触发');",
                                       OnFailure = "alert('Ajax OnFailure事件被触发');"
                                   })
                </td>
            </tr>
        </tfoot>
    </table>

    样式:

    #dt{margin:10px;}
    #dt tr{height:32px;}
    #dt thead tr th{font-size:14px; border:1px solid #C1DAD7; background:#CAE8EA;}

    #dt tbody tr:hover{background:#f2f9fa;}
    #dt tbody tr td{border:1px solid #C1DAD7; text-align:center; word-wrap:break-word; word-break: break-all; }

    #dt tfoot tr td{border:1px solid #C1DAD7; text-align:center; word-wrap:break-word;}
  • 相关阅读:
    模拟75 题解
    模拟74 题解
    模拟73 题解
    模拟72 题解
    前端学习:html基础学习二
    前端学习:html基础学习一
    JavaScrip:Function函数编程
    MYSQL:RELPACE用法
    MYSQL:插入记录检查记录是否存在,存在则更新,不存在测插入记录SQL
    OpenCASCADE Curve Length Calculation
  • 原文地址:https://www.cnblogs.com/fjzhang/p/2648745.html
Copyright © 2011-2022 走看看