卡卡網

本文介紹一個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>規(guī)定邊框的顏色。</td>
</tr>
<tr>
  <td><i>outline-style</i></td>
  <td>規(guī)定邊框的樣式。</td>
</tr>
<tr>
  <td><i>outline-width</i></td>
  <td>規(guī)定邊框的寬度。</td>
</tr>
<tr>
  <td>inherit</td>
  <td>規(guī)定應該從父元素繼承 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;
}

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

標簽: css  table