表格中的border-spacing与border

border-spacing

1. 可用,需设置在table标签上或者display为table、inline-table的元素。

  必须有border-collapse属性时,才起作用。 如果单元格不分离,怎么来的单元格之间的距离啊。

  border-spacing:10px 30px;

  表示单元格水平间隔10px,竖直间隔30px
  

table{
border-collapse: collapse;
/*设置为collapse后,border-spacing就失效了*/
/*看来这个属性要在table上设置*/
border-spacing: 130px 15px;
}

表格里的border

1.

这里有两个border,一个是可以在table标签上设置,一个是可以在td上设置。

table上的border指的最外圈大框的border,td的border指的是最小的单元格的border。

具体表现如下:

这里我设置了padding和border-spacing。

2.

当我设置border-collapse 为collapse的时候,神奇的一幕发生了。

padding和border-spacing 都不起作用了。border-spacing可以理解,但padding为何就没作用了呢?

我的理解是关键还是在collapse,设置这个属性后,所有的border都连接在了一起。包括外围border和cell的border,不再分割单元格。

时间: 2024-10-18 01:00:01

表格中的border-spacing与border的相关文章

CSS中设置border:none和border:0的区别

在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可. border:none;与border:0;的区别体现有两点:一是理论上的性能差异:二是浏览器兼容性的差异. 1.性能差异 [border:0;]把border设为"0"像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值.[border:none;]把bord

将文本框内容添加到表格中的行代码实例

将文本框内容添加到表格中的行代码实例:在实际操作中,往往需要将文本框中的内容添加到表格的行中或者类似的情况,下面就通过一个实例介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&

javascript如何便利表格中的行和单元格

javascript如何便利表格中的行和单元格:尽管现在普遍使用div布局来替代表格,这并不说明table是一无是处的,在制作表格类型的结构的时候还是使用table更为有效.在实际应用中有时候需要便利表格中的行和单元格,下面就通过实例简单介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author&quo

Jquery实现表格中的查看删除修改

首先我们在学习js的时候就有接触到表格中的一些操作,那么Jquery是一个兼容多浏览器的轻量级的javascript库,它的核心理念是写的更少,做的更多. 现在就用学到的Jquery来做一个表格中的查看删除修改感受一下Jquery的强大. 第一步:我们编写html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

html表格中的tr td th用法

表格是html中经常使用到的,简单的使用可能很多人都没问题,但是更深入的了解的人恐怕不多,下面我们先来看一下如何使用. <table>是<tr>的上层标签 <tr>必须在一个<table></table>里面,它不能单独使用,相当于<table>的属性标签. <table>标示一个表格,<tr>标示这个表格中间的一个行 <td>标示行中的一个列,需要嵌套在<tr></tr>中

java循环取出word table表格中所有的值

//往表格里面插入值或者打开表格填写 <%@ page language="java" import="java.util.*, java.awt.*" pageEncoding="gb2312"%> <%@page import="com.zhuozhengsoft.pageoffice.*, com.zhuozhengsoft.pageoffice.wordwriter.*"%> <%@ ta

可以增加和删除行的table(可以编辑表格中内容)

页面文件 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <script type="text/javascript" src="jquery-1.6.min.js"></script> <s

JavaScript基础 使用for循环 获得一个表格中所有行的id值

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

JavaScript基础 rows,cells 得到表格中所有单元格的内容

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

用原生Dom实现向表格中添加数据

<script> document.getElementById("submit").onclick=function(){ //获取输入节点 var name=document.getElementById("iname"); var email=document.getElementById("iemail"); var addresss=document.getElementById("iaddress");