技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

漂亮CSS表格(Table),最后一行是汇总行【实例】

作者:admin    时间:2020-2-24 16:42:44    浏览:

本文给大家介绍一个漂亮的CSS价格表格,它与其他表格的不同在于,它最后一行是汇总行,在背景颜色和文字大小上要有所突出。

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>数量</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>

execcodegetcode

代码分析

下面CSS代码是定义表格头部的背景和文字颜色。

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

下面CSS代码是定义表格最后一行的背景和文字颜色。

tfoot {
  background: SeaGreen; /* 背景颜色 */
  color: white; /* 文字颜色 */
  text-align: right; /* 文字靠右对齐 */
}

相关文章

标签: table  css  css3  
  • IT热文
  • 站长推荐