html table 显示最后一条,漂亮CSS表格(Table)，最后一行是汇总行【实例】

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

CSS价格表格

HTML代码html>

Table V01

* {

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;

}

项目数量价格总价

帐篷1$279.00$279.00睡袋2$159.95$319.90露营椅2$39.50$79.00总计$667.90

代码分析

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

background: SteelBlue; /* 背景颜色 */

color: white; /* 文字颜色 */

}

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

background: SeaGreen; /* 背景颜色 */

color: white; /* 文字颜色 */

text-align: right; /* 文字靠右对齐 */

}

html表格展开格式,4款简单常见的纯CSS表格(table)样式
本文介绍4款简单常见的纯CSS表格(table)样式. 1.默认表格(default table) 添加pure-table类样式化表格, 此类向表元素添加填充(padding)和边框(borders ...
计算机word表格线设置在哪里,word表格文字显示不全_word表格怎么设置显示最后一行线？_word表格怎么加一行...
word表格中经常会碰到最后一行表格的下面的线显示不出,而如果转换成PDF则可以看到线.在网上搜索也没有正确的调整方法,后来经过多次调整表格,终于找到了一个比较好的解决方法. 1.如图1所示情况:首先 ...
html css表格制作,CSS 表格(Table)
CSS 表格使用CSS可以大大提高HTML表格的外观,下表是通过CSS制作的表格. Company Contact Country Alfreds Futterkiste Maria Anders ...
php表格所有边框实线,css表格怎么添加边框样式？css表格边框样式总结（附完整实例）...
本篇文章主要讲述的就是关于css表格添加边框样式,这里还有关于css表格边框样式的总结,还有css表格边框的完整实例.接下来就让我们一起来看这篇文章吧首先我们先看看如何利用css来给表格添加边框: ...
html表格边框仅一条线,css 设置table边线为一条线
table { border-collapse:collapse; } 很简单定义和用法 border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式. 只有当这个值不是 ...
layui table勾选框的修改_layui表格(Table)下添加可更新拉选择框select
添加CSS 防止下拉框被遮挡 /* 防止下拉框下拉值被遮盖*/ .layui-table-cell { overflow: visible; } .layui-table-box { overflow ...
CSS表格和设置表格样式
表格表格在日常生活中使用的非常的多,比如excel就是专门用来创建表格的工具, 表格就是用来表示一些格式化的数据的,比如:课程表.银行对账单 1.如何在网页中创建表格在网页中也可以来创建出不同的表 ...
[CSS]分享几条漂亮的下划线样式
早上看到一篇博客,内容没什么,但其中有几条漂亮的下划线感觉非常不错,虽然非常简单,但对于经常写博的人很有用,这里分享一下,喜欢的就直接拿去用吧. 使用方法: 1.后台管理->设置:[页首Html ...
layui数据表格table在选项卡tabs中分页条不显示的解决
layui数据表格table在选项卡tabs中分页条不显示的解决解决:渲染后重新设置高度:$(".layui-table-box").css("height" ...
谷歌浏览器显示oracle,css让table不显示边框的代码在火狐和谷歌浏览器中无效
css让table不显示边框的代码在火狐和谷歌浏览器中无效发布时间:2013-06-26 17:12:32 作者:佚名我要评论在css中已经写好了使table不显示边框的代码,在ie浏览 ...

html table 显示最后一条,漂亮CSS表格(Table)，最后一行是汇总行【实例】

html table 显示最后一条,漂亮CSS表格(Table)，最后一行是汇总行【实例】相关推荐

最新文章

热门文章