技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

純css實現的table表格樣式,教程站常用

作者:admin    時間:2017-8-25 15:29:16    瀏覽:

本文介紹一個table表格樣式,是一種很友好的看著很舒服的表格樣式,常見用于教程站里。這也是是個十分通用的table表格樣式,可以說大部分網頁都適用。

效果圖如下

table表格樣式

table表格樣式

代碼分析

css代碼

table.dataintable {
  margin-top:15px;
  border-collapse:collapse;
  border:1px solid #aaa;
  width:100%;
}

table.dataintable th {
  vertical-align:baseline;
  padding:5px 15px 5px 6px;
  background-color:#3F3F3F;
  border:1px solid #3F3F3F;
  text-align:left;
  color:#fff;
}

table.dataintable td {
  vertical-align:text-top;
  padding:6px 15px 6px 6px;
  border:1px solid #aaa;
}

table.dataintable tr:nth-child(odd) {
  background-color:#F5F5F5;
}

table.dataintable tr:nth-child(even) {
  background-color:#fff;
}

html代碼

<table class="dataintable">
<tr>
  <th>值</th>
  <th>描述</th>
</tr>
<tr>
  <td><i>outline-color</i></td>
  <td>規定邊框的顏色。</td>
</tr>
<tr>
  <td><i>outline-style</i></td>
  <td>規定邊框的樣式。</td>
</tr>
<tr>
  <td><i>outline-width</i></td>
  <td>規定邊框的寬度。</td>
</tr>
<tr>
  <td>inherit</td>
  <td>規定應該從父元素繼承 outline 屬性的設置。</td>
</tr>
</table>

execcodegetcode

代碼解釋:如何做到表格 TR 單雙行顏色相間而不同?

從效果圖看到,表格 TR 單雙行顏色相間而不同,這比整個表格同一顏色好看很多,若表格大又長時看起來就不會覺得那么累。關鍵代碼如下:

table.dataintable tr:nth-child(odd) {
  background-color:#F5F5F5;
}

table.dataintable tr:nth-child(even) {
  background-color:#fff;
}

代碼里 oddeven 是定義單雙行的樣式,其中 odd 是單行,而 even 是雙行。

標簽: css  table  
  • IT熱文
  • 站長推薦
陕西11选5中奖助手 黑龙江快乐十分前30期分布走势图 上海快3500期走势图 内蒙古快三百位 买股票用什么软件好 北京pk赛车开奖直播网 股票行情今天查询大盘 快3稳赚公式 11选5遗漏数据查询吉林 排列七开奖查询 今日股票在线查询