html5的css3伪类在table表格中的最常用例子
<!--css伪类在table中的应用,包括斑纹行和鼠标悬停-->
<style>
.tab{ border:none; font-size:12px;}
.tab td, .tab th{padding:3px;}
.tab th{background:#333333; color:#FFF;}/*列名行反黑*/
.tab tr:nth-child(even){ background:#f0f0f0;}/*奇数行*/
.tab tr:nth-child(odd){ background:#ddd;}/*偶数行*/
.tab tr:nth-child(n):hover{ background:#FFC;}/*行鼠标悬停*/
.tab th:nth-child(1){width:35%;}/*第1列*/
.tab th:nth-last-child(1){width:30%;}/*最后列*/
.tab td{text-align:right;}/*td右对齐*/
.tab td:nth-child(1){text-align:left;}/*第1列td左对齐*/
.tab tr:nth-last-child(-n+2){font-size:14px; font-weight:bold;}/*倒数2行加粗*/
.tab tr:nth-last-child(2){color:#03C;}/*倒数第2行套色*/
</style>
<table width="400" cellpadding="0" cellspacing="0" class="tab">
<tr>
<th>名称</th>
<th>单价
<th>数量</th>
<th>合计</th>
</tr>
<tr>
<td>电磁炉</td>
<td>128</td>
<td>2</td>
<td>256</td>
</tr>
<tr>
<td>电水壶</td>
<td>50</td>
<td>10</td>
<td>500</td>
</tr>
<tr>
<td>电风扇</td>
<td>99</td>
<td>1</td>
<td>99</td>
</tr>
<tr>
<td colspan="3">运费</td>
<td>60</td>
</tr>
<tr>
<td colspan="3">合计</td>
<td>885</td>
</tr>
</table>
相关文章
本文作者:漫游
文章标题: html5的css3伪类在table表格中的最常用例子
本文地址:http://www.roammemo.com/html5/76.html
版权声明:若无注明,本文皆为“漫游的备忘录”原创,转载请保留文章出处。
本文地址:http://www.roammemo.com/html5/76.html
版权声明:若无注明,本文皆为“漫游的备忘录”原创,转载请保留文章出处。