CSS表格樣式:圓角,隔行,變色的具體實(shí)現(xiàn)
發(fā)布時間:2013-12-30 15:51:53 作者:佚名
我要評論

常見的CSS表格樣式有圓角、隔行、變色等等,下面有個不錯的示例,感興趣的朋友可以參考下
先看效果圖:
CSS:
<style type="text/css">
table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}
.table {
width: 100%;
margin-bottom: 18px;
}
.table th, .table td {
padding: 8px;
line-height: 18px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.table th {
font-weight: bold;
}
.table thead th {
vertical-align: bottom;
}
.table caption + thead tr:first-child th, .table caption + thead tr:first-child td, .table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, .table thead:first-child tr:first-child td {
border-top: 0;
}
.table tbody + tbody {
border-top: 2px solid #dddddd;
}
.table-condensed th, .table-condensed td {
padding: 4px 5px;
}
.table-bordered {
border: 1px solid #dddddd;
border-collapse: separate;
*border-collapse: collapsed;
border-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table-bordered th, .table-bordered td {
border-left: 1px solid #dddddd;
}
.table-bordered caption + thead tr:first-child th, .table-bordered caption + tbody tr:first-child th, .table-bordered caption + tbody tr:first-child td, .table-bordered colgroup + thead tr:first-child th, .table-bordered colgroup + tbody tr:first-child th, .table-bordered colgroup + tbody tr:first-child td, .table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td {
border-top: 0;
}
.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
}
.table-bordered thead:first-child tr:first-child th:last-child, .table-bordered tbody:first-child tr:first-child td:last-child {
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
}
.table-bordered thead:last-child tr:last-child th:first-child, .table-bordered tbody:last-child tr:last-child td:first-child {
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
}
.table-bordered thead:last-child tr:last-child th:last-child, .table-bordered tbody:last-child tr:last-child td:last-child {
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
}
.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {
background-color: #f9f9f9;
}
.table tbody tr:hover td, .table tbody tr:hover th {
background-color: #f5f5f5;
}
</style>
再看表格引用:
<table class="table table-bordered table-striped ">
<thead>
<tr>
<th width="30"> <input type="checkbox" name="ckall" id="ckall" />
</th>
<th width="40"> ID號 </th>
<th width="80"> 編碼 </th>
<th> 名稱 </th>
<th> 用戶密碼 </th>
<th width="60"> 管理員否 </th>
<th width="55"> 操作 </th>
</tr>
</thead>
<tr>
<td><input type="checkbox" name="c_id" value="a" /></td>
<td>1</td>
<td>awinlau</td>
<td> 胡光光</td>
<td> awin</td>
<td> 管理員 </td>
<td><a href="#" class="btn btn-mini"><i class="icon-edit"> </i>編輯</a></td>
</tr>
<tr>
<td><input type="checkbox" name="c_id" value="a" /></td>
<td>2</td>
<td>hugge</td>
<td> 劉若英</td>
<td> test</td>
<td> 管理員 </td>
<td><a href="#" class="btn btn-mini"><i class="icon-edit"> </i>編輯</a></td>
</tr>
<tr>
<td><input type="checkbox" name="c_id" value="a" /></td>
<td>3</td>
<td>awinlau</td>
<td> 胡光光</td>
<td> awin</td>
<td> 管理員 </td>
<td><a href="#" class="btn btn-mini"><i class="icon-edit"> </i>編輯</a></td>
</tr>
<tr>
<td><input type="checkbox" name="c_id" value="a" /></td>
<td>4</td>
<td>awinlau</td>
<td> 胡光光</td>
<td> awin</td>
<td> 管理員 </td>
<td><a href="#" class="btn btn-mini"><i class="icon-edit"> </i>編輯</a></td>
</tr>
</table>

CSS:
復(fù)制代碼
代碼如下:<style type="text/css">
table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}
.table {
width: 100%;
margin-bottom: 18px;
}
.table th, .table td {
padding: 8px;
line-height: 18px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.table th {
font-weight: bold;
}
.table thead th {
vertical-align: bottom;
}
.table caption + thead tr:first-child th, .table caption + thead tr:first-child td, .table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, .table thead:first-child tr:first-child td {
border-top: 0;
}
.table tbody + tbody {
border-top: 2px solid #dddddd;
}
.table-condensed th, .table-condensed td {
padding: 4px 5px;
}
.table-bordered {
border: 1px solid #dddddd;
border-collapse: separate;
*border-collapse: collapsed;
border-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table-bordered th, .table-bordered td {
border-left: 1px solid #dddddd;
}
.table-bordered caption + thead tr:first-child th, .table-bordered caption + tbody tr:first-child th, .table-bordered caption + tbody tr:first-child td, .table-bordered colgroup + thead tr:first-child th, .table-bordered colgroup + tbody tr:first-child th, .table-bordered colgroup + tbody tr:first-child td, .table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td {
border-top: 0;
}
.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
}
.table-bordered thead:first-child tr:first-child th:last-child, .table-bordered tbody:first-child tr:first-child td:last-child {
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
}
.table-bordered thead:last-child tr:last-child th:first-child, .table-bordered tbody:last-child tr:last-child td:first-child {
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
}
.table-bordered thead:last-child tr:last-child th:last-child, .table-bordered tbody:last-child tr:last-child td:last-child {
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
}
.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {
background-color: #f9f9f9;
}
.table tbody tr:hover td, .table tbody tr:hover th {
background-color: #f5f5f5;
}
</style>
再看表格引用:
復(fù)制代碼
代碼如下:<table class="table table-bordered table-striped ">
<thead>
<tr>
<th width="30"> <input type="checkbox" name="ckall" id="ckall" />
</th>
<th width="40"> ID號 </th>
<th width="80"> 編碼 </th>
<th> 名稱 </th>
<th> 用戶密碼 </th>
<th width="60"> 管理員否 </th>
<th width="55"> 操作 </th>
</tr>
</thead>
<tr>
<td><input type="checkbox" name="c_id" value="a" /></td>
<td>1</td>
<td>awinlau</td>
<td> 胡光光</td>
<td> awin</td>
<td> 管理員 </td>
<td><a href="#" class="btn btn-mini"><i class="icon-edit"> </i>編輯</a></td>
</tr>
<tr>
<td><input type="checkbox" name="c_id" value="a" /></td>
<td>2</td>
<td>hugge</td>
<td> 劉若英</td>
<td> test</td>
<td> 管理員 </td>
<td><a href="#" class="btn btn-mini"><i class="icon-edit"> </i>編輯</a></td>
</tr>
<tr>
<td><input type="checkbox" name="c_id" value="a" /></td>
<td>3</td>
<td>awinlau</td>
<td> 胡光光</td>
<td> awin</td>
<td> 管理員 </td>
<td><a href="#" class="btn btn-mini"><i class="icon-edit"> </i>編輯</a></td>
</tr>
<tr>
<td><input type="checkbox" name="c_id" value="a" /></td>
<td>4</td>
<td>awinlau</td>
<td> 胡光光</td>
<td> awin</td>
<td> 管理員 </td>
<td><a href="#" class="btn btn-mini"><i class="icon-edit"> </i>編輯</a></td>
</tr>
</table>
相關(guān)文章
- 想必大家對隔行變換色的概念都不陌生了吧,其實(shí)css3也是可以實(shí)現(xiàn)的,下面為大家詳細(xì)介紹下2014-02-19
- 單一的表格很容易使人感到枯燥,使用變色效果可以使得表格看起來更加舒適,在本文將為大家介紹下使用css實(shí)現(xiàn)隔行變色顯示,感興趣的朋友可以參考下2013-10-05
- CSS expression 隔行換色效果實(shí)現(xiàn)代碼,需要的朋友可以參考下。2009-12-13
網(wǎng)頁設(shè)計(jì)制作CSS實(shí)現(xiàn)隔行換色兩種方法-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
網(wǎng)頁設(shè)計(jì)制作,CSS實(shí)現(xiàn)隔行換色兩種方法: 第一種方法: 以下為引用的內(nèi)容: <style type="text/css"> UL.myul12008-10-17CSS實(shí)現(xiàn)網(wǎng)頁中的隔行換色代碼-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
以前在Dreamweaver中用表格布局網(wǎng)頁的時候常常用到一種設(shè)計(jì)手法--隔行換色。也就是新聞列表或是列表類的每隔一行就換另一個色彩這樣顯得很漂亮也很合適閱讀。所以這種2008-10-17CSS網(wǎng)頁隔行換色技巧-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
CSS隔行換色的問題,其實(shí)很簡單,您可以根據(jù)您的需要,采用下面的任何一種方法,當(dāng)然,要適合你的編碼與需求情況: 一、background背景圖片 如果行高固定的話,推2008-10-17HTML n種方式實(shí)現(xiàn)隔行變色的示例代碼
這篇文章主要介紹了HTML n種方式實(shí)現(xiàn)隔行變色的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起2020-06-17