几款好看的css表格

表格一：

 

代码：

html代码段：

是用vs写的   表头<th>那是从数据库读取的数据段,<td>那是我为测试效果加的代码，大家可以自行更改。 
<h1>待处理订单</h1>
<table id="all-requst">
    <thead>
        <tr>
            <th>@Html.LabelFor(m => m.StudentId)</th>
            <th>@Html.LabelFor(m => m.UserName)</th>
            <th>@Html.LabelFor(m => m.ProblemTitle)</th>
            <th>@Html.LabelFor(m => m.Level)</th>
            <th>@Html.LabelFor(m => m.Telephone)</th>
            <th>@Html.LabelFor(m => m.Location)</th>
            <th>@Html.LabelFor(m => m.ExpectTime)</th>
            <th>@Html.LabelFor(m => m.Condition)</th>
        </tr>
    </thead>

    <tbody>
        @{
        var requestRepo = new RequestRepo();
        }
        @foreach (var request in requestRepo.GetAll(x => x.Condition == 0))
    {
        <tr>
            <td>@request.StudentId</td>
            <td>@request.UserName</td>
            <td>@request.ProblemTitle</td>
            <td>@request.Level</td>
            <td>@request.Telephone</td>
            <td>@request.Location</td>
            <td>@request.ExpectTime</td>
            <td class="condition" id="Condition-@request.Id" value="">@request.Condition</td>
            <td><input type="button" value="接单" id="accept"/></td>
        </tr>
}
        <tr>
            <td>123</td>
            <td>像风一样</td>
            <td>你靠近</td>
            <td>云就投降</td>
            <td>风雪是你</td>
            <td>平淡是你</td>
            <td>余生是你</td>
            <td>2019-3-27</td>
            <td><input type="button" value="接单" id="accept" /></td>
        </tr>
        <tr>
            <td>123</td>
            <td>像风一样</td>
            <td>你靠近</td>
            <td>云就投降</td>
            <td>风雪是你</td>
            <td>平淡是你</td>
            <td>余生是你</td>
            <td>2019-3-27</td>
            <td><input type="button" value="接单" id="accept" /></td>
        </tr>
        <tr>
            <td>123</td>
            <td>像风一样</td>
            <td>你靠近</td>
            <td>云就投降</td>
            <td>风雪是你</td>
            <td>平淡是你</td>
            <td>余生是你</td>
            <td>2019-3-27</td>
            <td><input type="button" value="接单" id="accept" /></td>
        </tr>
        <tr>
            <td>123</td>
            <td>像风一样</td>
            <td>你靠近</td>
            <td>云就投降</td>
            <td>风雪是你</td>
            <td>平淡是你</td>
            <td>余生是你</td>
            <td>2019-3-27</td>
            <td><input type="button" value="接单" id="accept" /></td>
        </tr>
        <tr>
            <td>123</td>
            <td>像风一样</td>
            <td>你靠近</td>
            <td>云就投降</td>
            <td>风雪是你</td>
            <td>平淡是你</td>
            <td>余生是你</td>
            <td>2019-3-27</td>
            <td><input type="button" value="接单" id="accept" /></td>
        </tr>
        <tr>
            <td>123</td>
            <td>像风一样</td>
            <td>你靠近</td>
            <td>云就投降</td>
            <td>风雪是你</td>
            <td>平淡是你</td>
            <td>余生是你</td>
            <td>2019-3-27</td>
            <td><input type="button" value="接单" id="accept" /></td>
        </tr>
        <tr>
            <td>123</td>
            <td>像风一样</td>
            <td>你靠近</td>
            <td>云就投降</td>
            <td>风雪是你</td>
            <td>平淡是你</td>
            <td>余生是你</td>
            <td>2019-3-27</td>
            <td><input type="button" value="接单" id="accept" /></td>
        </tr>
        <tr>
            <td>123</td>
            <td>像风一样</td>
            <td>你靠近</td>
            <td>云就投降</td>
            <td>风雪是你</td>
            <td>平淡是你</td>
            <td>余生是你</td>
            <td>2019-3-27</td>
            <td><input type="button" value="接单" id="accept" /></td>
        </tr>
        <tr>
            <td>123</td>
            <td>像风一样</td>
            <td>你靠近</td>
            <td>云就投降</td>
            <td>风雪是你</td>
            <td>平淡是你</td>
            <td>余生是你</td>
            <td>2019-3-27</td>
            <td><input type="button" value="接单" id="accept" /></td>
        </tr>
        <tr>
            <td>123</td>
            <td>像风一样</td>
            <td>你靠近</td>
            <td>云就投降</td>
            <td>风雪是你</td>
            <td>平淡是你</td>
            <td>余生是你</td>
            <td>2019-3-27</td>
            <td><input type="button" value="接单" id="accept" /></td>
        </tr>
        <tr>
            <td>123</td>
            <td>像风一样</td>
            <td>你靠近</td>
            <td>云就投降</td>
            <td>风雪是你</td>
            <td>平淡是你</td>
            <td>余生是你</td>
            <td>2019-3-27</td>
            <td><input type="button" value="接单" id="accept" /></td>
        </tr>
    </tbody>
</table>

css代码段：

    body {
        background-image: url(/Content/z4.jpg);
        background-size: cover;
    }
    table {
        margin-top: 30px;
        font-family: STKaiti;
        border-collapse: collapse;
        border: 1px dashed white;
    }

        table tbody {
            display: block;
            height: 350px;
            overflow-y: scroll;
        }

        table thead,
        tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }  
    table tr td:nth-child(9) {
        background-color:white;
    }
    h1 {
        font-size: 40px;
        text-align: center;
        letter-spacing: 15px;
        color: gray;
        font-family: STKaiti;
    }
    #all-requst {
        margin-top: 30px;
        font-family: STKaiti;
    }
 
        table tr:nth-child(even) {
            background-color: #FFFFFF;
        }
        table tr:nth-child(odd) {
            background-color: #E6E6FA;
        }
        table th:nth-child(even) {
            background-color: #DDDDDD;
        }

    table th:nth-child(odd) {
        background-color: #CCCCFF;
    }
        
    table, thead, tbody {    
        width: 1200px;
    }

    th {
        color: white;
        height: 60px;
        text-align: center;
        font-size: 20px;
        font-weight: lighter;
        letter-spacing: 2px;
        border-radius:5px;
    }
    tr, td {
        border: 1px dotted white;
        height: 30px;
        text-align: center;
    }
   
    tbody {
        font-size: 1em;
        padding: 20px;
    }
    table tr:hover {
        background-color: #CCDDFF;
    }

    #accept {
        text-align: center;
        background-color: #CCDDFF;
        border: none;
        border-radius: 30px 10px;
        width: 60px;
        height: 30px;
        margin-left: 20px;
    }

第二个表格：

html代码段：

<h1>所有用户</h1>
<div class="table_div">
    <div class="div_clear">
        
        <div class="center_top">                     
                <span style="font-weight:bold">你当前的位置</span>：所有用户       
        </div>
    </div>
        <div class="center_center">
            <div class="table_content">
                <table cellspacing="0px" cellpadding="0px">
                    <thead>
                        <tr>
                            <th width="15%">锐捷账号</th>
                            <th width="15%">姓名</th>
                            <th width="10%">性别</th>
                            <th width="15%">年级</th>
                            <th width="15%">电话</th>
                            <th width="15%">角色</th>
                            <th wdith="15%" style="border-right:none">操作</th>
                        </tr>
                    </thead>
                    <tbody>

                        <tr>
                            <td width="15%">1605010104</td>
                            <td width="15%">像风一样</td>
                            <td width="10%">你靠近</td>
                            <td width="15%">云就投降</td>
                            <td width="15%">风雪是你</td>
                            <td width="15%">平淡是你</td>
                            <td width="15%" style="border-right:none">
                                <img width='16' height='16' src="~/Content/delete.png" style="vertical-align:middle" />
                                <a href="#">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">1605010104</td>
                            <td width="15%">像风一样</td>
                            <td width="10%">你靠近</td>
                            <td width="15%">云就投降</td>
                            <td width="15%">风雪是你</td>
                            <td width="15%">平淡是你</td>
                            <td width="15%" style="border-right:none">
                                <img width='16' height='16' src="~/Content/delete.png" style="vertical-align:middle" />
                                <a href="#">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">1605010104</td>
                            <td width="15%">像风一样</td>
                            <td width="10%">你靠近</td>
                            <td width="15%">云就投降</td>
                            <td width="15%">风雪是你</td>
                            <td width="15%">平淡是你</td>
                            <td width="15%" style="border-right:none">
                                <img width='16' height='16' src="~/Content/delete.png" style="vertical-align:middle" />
                                <a href="#">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">1605010104</td>
                            <td width="15%">像风一样</td>
                            <td width="10%">你靠近</td>
                            <td width="15%">云就投降</td>
                            <td width="15%">风雪是你</td>
                            <td width="15%">平淡是你</td>
                            <td width="15%" style="border-right:none">
                                <img width='16' height='16' src="~/Content/delete.png" style="vertical-align:middle" />
                                <a href="#">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">1605010104</td>
                            <td width="15%">像风一样</td>
                            <td width="10%">你靠近</td>
                            <td width="15%">云就投降</td>
                            <td width="15%">风雪是你</td>
                            <td width="15%">平淡是你</td>
                            <td width="15%" style="border-right:none">
                                <img width='16' height='16' src="~/Content/delete.png" style="vertical-align:middle" />
                                <a href="#">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">1605010104</td>
                            <td width="15%">像风一样</td>
                            <td width="10%">你靠近</td>
                            <td width="15%">云就投降</td>
                            <td width="15%">风雪是你</td>
                            <td width="15%">平淡是你</td>
                            <td width="15%" style="border-right:none">
                                <img width='16' height='16' src="~/Content/delete.png" style="vertical-align:middle" />
                                <a href="#">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">1605010104</td>
                            <td width="15%">像风一样</td>
                            <td width="10%">你靠近</td>
                            <td width="15%">云就投降</td>
                            <td width="15%">风雪是你</td>
                            <td width="15%">平淡是你</td>
                            <td width="15%" style="border-right:none">
                                <img width='16' height='16' src="~/Content/delete.png" style="vertical-align:middle" />
                                <a href="#">删除</a>
                            </td>
                        </tr>               
                    </tbody>
                </table>
            </div>       
       </div>
    </div>
    <div class="div_clear">
        <div class="table_foot">
            <span>&nbsp;&nbsp;共有 99 条记录，当前第 1/10 页</span>
            <div style="float:right;padding-right:30px">
                <input type="button" value="首页" />
                <input type="button" value="上页" />
                <input type="button" value="下页" />
                <input type="button" value="尾页" />
                <span>跳转到</span>
                <input type="text" size="1" />
                <input type="button" value="跳转" />
            </div>
        </div>
        </div>

css代码段：

    /*******************************通用样式***********************/
    body {
        background-image: url(/Content/z4.jpg);
        background-size: cover;
    }
     h1{
         font-size:40px;
         letter-spacing:3px;
         text-align:center;
     }
        body a {
            color: #03515d;
            text-decoration: none;
        }

        body button {
            color: #03515d;
        }

        body span {
            color: #03515d;
        }

    .center_bottom input {
        color: #03515d;
        font-size: 12px;
        height: 20px;
        width: 40px;
        padding: 2px;
        vertical-align: middle;
        text-align: center;
        margin-bottom: 6px;
    }
    /**************************布局部分********************/
   
    .table_div {
        width: 1000px;
        padding: 10px;
        margin:0 auto;
      
    }

    .div_clear {
        clear: both;     
    }
 

    .center_center {
        height: 400px;
        width: 900px;
        float: left;
    }
    .table_foot{
        margin-top:30px;
    }
 
    /**************************************表格内容***********************************/
    .table_content table th:nth-child(even) {
        background-color: #D1BBFF;
    }

    .table_content table th:nth-child(odd) {
        background-color: #E8CCFF;
    }
    .table_content {
        margin: 5px;
        border: 1px dashed #FFF0F5;
        width: 1000px;
        height: 375px;
        overflow-x: hidden;
        overflow-y: auto;
    }

        .table_content table {
            width: 100%;
            border: 0;
            border-collapse: collapse;
            font-size: 12px;
        }

            .table_content table tr:hover {
                background-color: #FFDEAD;
            }

            .table_content table th {
                border-collapse: collapse;
                height: 60px;
                background: url("./tab/images/bg.gif");
                border-right: 2px dashed #FFF0F5;
                border-bottom: 2px dashed #FFF0F5;
                text-align: center;
                font-size: 20px;
            }

            .table_content table td {
                height: 40px;
                word-wrap: break-word;
                max-width: 300px;
                text-align: center;
                vertical-align: middle;
                border-right: 2px dashed #FFF0F5;
                border-bottom: 2px dashed #FFF0F5;
            }

表格三：

 

表格四：

表格五：

 

哈哈哈哈哈，这是在做一个校内电脑维修网站，需要做很多表格。但是呢，我不太想让网站内出现一样的东西，于是我就写了五六个表格。希望能给大家提供些小小的帮助。