女人18毛片A级毛片免费视频,国产三级小视频在线播放完整版,亚洲中文字幕网站你懂得

技術(shù)頻道 - html技術(shù)

漂亮CSS表格(Table)，最后一行是匯總行【實(shí)例】

作者:admin 時間:2020-2-24 16:42:44 瀏覽:

本文給大家介紹一個漂亮的CSS價格表格，它與其他表格的不同在于，它最后一行是匯總行，在背景顏色和文字大小上要有所突出。

CSS價格表格

HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
<title>Table V01</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    
<style type="text/css">

* {
margin: 0px; 
padding: 0px; 
box-sizing: border-box;
}

body, html {
height: 100%;
font-family: sans-serif;
}

table {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  margin:0 auto;
  margin-top:30px;
}

caption {
  text-align: left;
  color: silver;
  font-weight: bold;
  text-transform: uppercase;
  padding: 5px;
}

thead {
  background: SteelBlue;
  color: white;
}

th,
td {
  padding: 5px 10px;
}

tbody tr:nth-child(even) {
  background: WhiteSmoke;
}

tbody tr td:nth-child(2) {
  text-align:center;
}

tbody tr td:nth-child(3),
tbody tr td:nth-child(4) {
  text-align: right;
  font-family: monospace;
}

tfoot {
  background: SeaGreen;
  color: white;
  text-align: right;
}

tfoot tr th:last-child {
  font-family: monospace;
}

</style>
</head>
<body>

<table>
  <caption>露營開支</caption>
  <thead>
    <tr>
      <th>項目</th>
      <th>數(shù)量</th>
      <th>價格</th>
      <th>總價</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>帳篷</td>
      <td>1</td>
      <td>$279.00</td>
      <td>$279.00</td>
    </tr>
    <tr>
      <td>睡袋</td>
      <td>2</td>
      <td>$159.95</td>
      <td>$319.90</td>
    </tr>
    <tr>
      <td>露營椅</td>
      <td>2</td>
      <td>$39.50</td>
      <td>$79.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3">總計</th>
      <th>$667.90</th>
    </tr>
  </tfoot>
</table>


</body>
</html>

execcode getcode

代碼分析

下面CSS代碼是定義表格頭部的背景和文字顏色。

thead {
  background: SteelBlue; /* 背景顏色 */
  color: white; /* 文字顏色 */
}

下面CSS代碼是定義表格最后一行的背景和文字顏色。

tfoot {
  background: SeaGreen; /* 背景顏色 */
  color: white; /* 文字顏色 */
  text-align: right; /* 文字靠右對齊 */
}

卡卡網(wǎng)

贊助商

分類目錄

贊助商

最新文章

搜索

技術(shù)頻道 - html技術(shù)

漂亮CSS表格(Table)，最后一行是匯總行【實(shí)例】

相關(guān)文章

標(biāo)簽: table css css3

卡卡網(wǎng)

贊助商

分類目錄

贊助商

最新文章

搜索

技術(shù)頻道 - html技術(shù)

漂亮CSS表格(Table)，最后一行是匯總行【實(shí)例】

相關(guān)文章

標(biāo)簽: table css css3

漂亮CSS表格(Table)，最后一行是匯總行【實(shí)例】