我经常用的一个table样式

<table id="dt">
    <thead>
        <tr>
            <th style="width: 30px;">
            </th>
            <th style="width: 200px; padding: 0 3px 0 3px;">
                书本名称
            </th>
            <th style="width: 130px; padding: 0 3px 0 3px;">
                ISBN编码
            </th>
            <th style="width: 130px; padding: 0 3px 0 3px;">
                作者
            </th>
            <th style="width: 380px; padding: 0 3px 0 3px;">
                出版社
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var od in Model)
        {    
            <tr>
                <td style="width: 30px;">
                    @Html.CheckBox("checkBox", @od.check.ToString() == "True" ? true : false, new { id = od.book.DResID })
                </td>
                <td style="width: 200px; padding: 0 3px 0 3px;">@od.book.Name
                </td>
                <td style="width: 130px; padding: 0 3px 0 3px;">@od.book.Code
                </td>
                <td style="width: 130px; padding: 0 3px 0 3px;">@od.book.Author
                </td>
                <td style="width: 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;}