css border-spacing设置表格中单元格的边框间距属性笔记

原创 国哥笔记  2018-11-02 14:15  阅读 793 views 次

border-spacing属性定义及用法

在css中,border-spacing属性是用来设置表格中行和单元格的边框在横向(水平)和纵向(垂直)上的间距。但特别要注意的是:单元格的边框必须要分离,这也很好理解,如果单元格的边框不分离,就没有单元格边框距离之说,使用border-spacing属性就形同虚设,没有任何效果(表格默认情况下单元格的边框是分离的,使用border-collapse属性可以设置边框分离和合并)。

border-spacing属性有两个属性值,第一个属性值为水平距离,第二个属性值为垂直距离。如果border-spacing属性只设置一个属性值,那么这个属性值是水平距离,又是垂直距离。

扩展:border-spacing属性不仅仅只用在表格元素上,还可以使用在display为table或inline-table的元素上。

border-spacing属性语法格式

  1. css语法:border-spacing: length length;
  2. css语法:border-spacing: length;
  3. JavaScript语法:object.style.borderSpacing="15px";

border-spacing属性值说明

  • length:定义相邻单元格的边框之间的距离(单位:px、cm等,不允许为负值,如:10px;)。
  1. 只设置一个length参数,设置的是水平和垂直间距(border-spacing: 10px;);
  2. 设置两个length参数,第一个设置的是水平间距,第二个设置的是垂直间距;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css border-spacing设置表格中单元格的边框间距属性笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
table{width: 300px;height: 60px;;}
#b{border-spacing: 10px 20px;}
</style>
</head>
<body>
使用border-spacing之前:
<table id="a" border="1">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
</table>
使用border-spacing之后:
<table id="b" border="1">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
</table>
</body>
</html>

运行结果:

css border-spacing设置表格中单元格的边框间距属性笔记

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/border-spacing.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情