几款好看的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> 共有 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;
??????????? }
表格三：
?
表格四：
表格五：
?
哈哈哈哈哈，這是在做一個校內電腦維修網站，需要做很多表格。但是呢，我不太想讓網站內出現一樣的東西，于是我就寫了五六個表格。希望能給大家提供些小小的幫助。
?
?
?
?
?
?
?
?
?
?
總結
以上是生活随笔為你收集整理的几款好看的css表格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 正则表达式的基本语法
- 下一篇： [Leedcode][第215题][JA