html中的table是一个历史相当悠久的标签,它能够很方便的实现数据的表格展示。虽然table是个很基础的标签,但是想用好还是对css相关知识有要求的。

由于table标签中自带的属性操作起来略为麻烦,本文中所有的案例均使用纯css(scss)实现。

我们拿几个常见的table样式案例来进行讲解。

首先,html代码是统一的:

    <table class="table">
<tr>
<th>abcd</th>
<th>abcd</th>
<th>abcd</th>
<th>abcd</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

案例一:外部带边框,内部无边框。效果图:

scss:

.table{
border: 1px solid #;
th,td{
text-align: center;
padding: 20px 40px;
}
}

案例二:内外均带边框,并实现隔行换色。效果图:

scss:

.table{
border: 1px solid #;
border-collapse: collapse;
tr{
&:nth-child(odd){
background-color: #cccccc;
}
&:nth-child(even){
background-color: #f4f4f4;
}
}
th,td{
text-align: center;
padding: 20px 40px;
border: 1px solid #;
}
}

该案例关键的属性是border-collapse: collapse; 它能让重复的边框折叠起来并且消除表格直接的间距。(http://www.w3school.com.cn/cssref/pr_tab_border-collapse.asp

案例三:外部带边框,各行之间用不横跨整张表格的横线隔开。效果图:

scss:

.table{
border: 1px solid #999;
position: relative;
tr{
width: 100%;
&:after{
content: ' ';
height: 1px;
width: 90%;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
box-sizing: border-box;
border-bottom: 1px solid #bbb;
}
&:first-child:after{
height: 0;
border: 0;
}
td,th{
padding: 20px 40px;
text-align: center;
}
}
}

该案例由于分割线的效果较为特殊,无法用传统border实现,所以使用了伪类。如果想将实线换成虚线,更改伪类的border solid为dashed即可。

html table 使用总结的更多相关文章

  1. 散列表(hash table)——算法导论(13)

    1. 引言 许多应用都需要动态集合结构,它至少需要支持Insert,search和delete字典操作.散列表(hash table)是实现字典操作的一种有效的数据结构. 2. 直接寻址表 在介绍散列 ...

  2. React使用antd Table生成层级多选组件

    一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...

  3. 创建几个常用table展示方式插件

    这次和大家分享的是自己写的一个table常用几种展示格式的js插件取名为(table-shenniu),样式使用的是bootstrap.min.css,还需要引用jquery.min.js包,这个插件 ...

  4. html中table边框属性

    1.向右(横向)合并: <td colspan="5"><span>后台管理系统</span></td> 2.向下(纵向)合并: & ...

  5. MySQL中You can't specify target table for update in FROM clause一场

    mysql中You can't specify target table <tbl> for update in FROM clause错误的意思是说,不能先select出同一表中的某些值 ...

  6. 打印Lua的Table对象

    小伙伴们再也不用为打印lua的Table对象而苦恼了, 本人曾也苦恼过,哈哈 不过今天刚完成了这个东西, 以前在网上搜过打印table的脚本,但是都感觉很不理想,于是,自己造轮子了~ 打印的效果,自己 ...

  7. React中使用Ant Table组件

    一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...

  8. css设置table表格tr分离

    table { border-collapse:separate; border-spacing:10px 50px; }

  9. MySQL: Table 'mysql.plugin' doesn't exist的解决

    安装解压版MySQL以后,不能启动,日志里面出现了这个错误: MySQL: Table 'mysql.plugin' doesn't exist 这是因为mysql服务启动时候找不到内置数据库&quo ...

  10. js操作table表格导出数据到excel方法

    js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不 ...

随机推荐

  1. 如何排查Java内存泄漏?看完我给跪了!

    没有经验的程序员经常认为Java的自动垃圾回收完全使他们免于担心内存管理.这是一个常见的误解:虽然垃圾收集器做得很好,但即使是最好的程序员也完全有可能成为严重破坏内存泄漏的牺牲品.让我解释一下. 当不 ...

  2. mysql初始化失败的问题

    首先:my.ini 配置文件中 路径需要改成自己电脑mysql解压的路径. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

  3. 巧用Windows Server 2008的NPS策略

    单位员工大部分是移动办公一族,由于病毒库更新不及时.系统补丁没有安装,使移动办公设备处于危险状态,访问内部网络时很可能威胁整个网络.该如何防守网络访问这扇门呢? 笔者所在的单位是一家传媒公司,有数百人 ...

  4. HBase官方文档

    HBase官方文档 目录 序 1. 入门 1.1. 介绍 1.2. 快速开始 2. Apache HBase (TM)配置 2.1. 基础条件 2.2. HBase 运行模式: 独立和分布式 2.3. ...

  5. 云计算之路-阿里云上:在SLB上部署https遇到的问题及解决方法

    一.问题场景 这个问题只会出现在云服务器操作系统使用Windows Server 2012的场景,如果使用的是Windows Server 2008 R2则不存在这个问题. 二.https部署场景 1 ...

  6. WampServer配置说明

    注意:所有的修改操作都要重启WampServer服务器,部分需要重启WampServer软件 1.修改默认端口 1)打开文件:C:\wamp\bin\apache\apache2.4.9\conf\h ...

  7. github pages+阿里云域名绑定搭建个人博客

    1.选择mast 配置cname 设置域名 同时在github设置里面进行绑定 2.获取github pages的ip地址 打开你的电脑的命令行工具,ping你的github地址,忽略"/& ...

  8. java实现图的深度优先遍历和广度优先遍

    首先需要知道的是,图的深度优先遍历是一种类似于树的前序遍历方式,即选择一个入口节点,沿着这个节点一直遍历下去,直至所有节点都被访问完毕:如果说,图的深度优先遍历类似于树的前序遍历的话,那么图的广度优先 ...

  9. POJ 3481 Double Queue(Treap模板题)

    Double Queue Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 15786   Accepted: 6998 Des ...

  10. [SDOI2008][luogu2463] Sandy的卡片 [kmp]

    题面 传送门 思路 这道题里面有三个主要问题: 1.由"数值相等"变成了"加上一个整数以后数值相等"(减去等价于加负数) 2.由"最多匹配多少位(从第 ...