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;}
  • 相关阅读:
    hadoop
    常用安装
    rdd相关
    spark安装
    psutil
    scala linux终端高亮显示
    【原创】正则表达式(知识点总结)
    检测对象是否有某个属性(原型链检测和对象自身检测)
    JavaScript核心(对象+原型+函数+闭包+this+上下文堆栈+作用域链)
    JavaScript ES6迭代器指南
  • 原文地址:https://www.cnblogs.com/fjzhang/p/2648745.html
Copyright © 2011-2022 走看看