使用border-collapse设置table边框
类别:Web前端 浏览量:222
时间:2015-6-14 使用border-collapse设置table边框
使用border-collapse设置table边框border-collapse 属性设置table的边框是否被合并为一个单一的边框,还是像在标准的 HTML 中那样分开显示。
border-collapse值
值 | 描述 |
separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
collapse | 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
对应的JS脚本属性为:borderCollapse
border-collapse实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
<p><b>注释:</b>如果没有规定 !DOCTYPE,border-collapse 属性可能会引起意想不到的错误。</p>
</body>
</html>
效果图
标签:table边框
热门推荐
- angular引入组件库(详解Angular组件之中间人模式)
- laravel测试重连数据库(Laravel关系模型指定条件查询方法)
- extjs多选下拉框
- vuevlog制作软件(Vue实现Dialog封装)
- 云计算是一种服务的概念(云服务的意思,云服务是云计算吗?)
- 谷歌浏览器调试模式下刷新的几种方式
- docker节点不能启动(解决docker中ifconfig不可用的问题)
- vue导出动态的excel功能(vue中如何下载excel流文件及设置下载文件名)
- typescript使用技巧(深入理解typescript中的infer关键字的使用)
- dedecms调用点击数(织梦DEDECMS中显示复制地址,推荐给QQ/MSN上的好友的代码)