table中的tr的默认display:table-row，虽然可以修改为display：block但是就失去了tr特有的显示效果，如(td自动对齐)；

并且在tr中对起设定padding是有用的，可以增加内边距，但是设定margin是没有用的，tr的外间距依然是0；

解决方案：

css的两个属性：border-collapse:collapse / separate  & border-spacing:10px 10px；

需要用border-collapse & border-spacing联合控制tr的间距；

如：

123 <table style="border-collapse:separate; border-spacing:10px;">    <tr></tr></table>
 

table中设置tr行间距

 

CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框

值 描述
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。

border-collapse属性加上border-spacing属性就可以设置tr行间距

1 <table style="border-collapse:separate; border-spacing:0px 10px;">

2    <tr>

3     <td>那片笑声躺我想起我的那些花儿</td>

4    </tr>

5    <tr>

6     <td>在我生命每个角落静静为我开着</td>

7    </tr>

8 </table>

关于html中table表格tr,td的高度和宽度

关于html中table表格tr,td的高度和宽度

做网页的时候经常会遇到各种各样的问题，经常遇到的一个就是会碰到表格宽度对不齐的问题。首先，来分析一下这三个标签中height和width的区别：

 1、table中的width和height设置及其作用：

table中设置的height其实是设置一个最小值，也就是当表格中的内容或者行高总值超过这个设置值时，会自动延长表格的height值，当表格中的内容或者行高没有达到这个值时，会自动扩大到这个值。

table中设置的width值一般为表格宽度的最大值，不能改变，即使内部的内容宽度超过也不能改变。（这个内部内容如果是图片的话是可以改变表格宽度的。）

 2、tr标签中width和height设置及其作用：

tr标签里面的width设置不起任何作用，因为从第一点可以看出，表格的width是不能改变的，tr标签当然就不起作用了。

所以在tr中只有讨论height设置的可能了，tr中的height设置和几个tr之间的设置有关。

当几个tr都设置了height的具体数值时，各个tr的height按照设置的值的比例来分配总的height值，注意这里说的是总的height值。

当几个tr都没有设置height具体值时，平均分配总的height值。

当有的tr设置了具体的数值，有的没有设置具体的数值为默认时，先保证各个tr的基本需要，剩下的再满足设置了具体值的tr，之后再全部给没有设置具体值的tr。

最后一种情况还要考虑总的宽度不够tr总的设置值的情况，不够的话要满足tr的基本需要，这里会自动延长表格的height的。然后再考虑设置了height的tr，最后考虑没有设置height的tr。

3、td标签中width和height设置及其作用：

td标签里面的width和height都是起作用的。先看td的width吧，某一个td的width是和所处的一列每个td的width都相关的，取其中最大的width作为这一列中每个td的width，一定要从全局把握某个td的width，不能从这一个的width设置就断言它的宽度就是多少，这样是不准确的。

当我们把每一列的宽度都弄清楚之后，事情就好办了。这时候各个td之间的宽度分配按照第二条中各tr的height分配规律，

有一点不同的是全部是默认的情况下，各td的width不是平均分配，而是根据各自的实际内容按比例分配。

再看看td的height设置吧，各个td的height要看这个td所在的行的最大高度来确定这一行的每个td的height，然后各个行的高度情况和tr中的height分配原则是一样的。

还有一点要注意，就是td的height和tr的height之间的关系。首先肯定是根据内容的需要，在这个基础上，再根据设置的值来确定，哪个设置的值大就按照哪个，如果一个设置了值一个没有设置值，那么按照设置值的算。

table合并单元格 colspan（跨列）和rowspan（跨行）

colspan和rowspan这两个属性用于创建特殊的表格。

<td colspan="value"><td rowspan="value">

colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数：

在浏览器中将显示如下：

单元格1
单元格2 单元格3 单元格4

该例通过把colspan设为“3”, 令所在单元格横跨了三列。如果我们将colspan设为“2”，则该单元格将只跨越两列，于是有必要在第一行插入另外一个单元格，以确保两行占据相同的列数。


该例在浏览器中将显示如下：

单元格1 单元格2
单元格3 单元格4 单元格5

rowspan的作用是指定单元格纵向跨越的行数。


浏览器中将显示如下：

单元格1 单元格2
单元格3
单元格4

上例中的单元格1，其rowspan被设为“3”，这表示该单元格必须跨越三行（本身一行，加上另外两行）。因此，单元格1和单元格2在同一行，而单元格3和单元格4形成独立的两行。

综合实例

ss
　 　 　 　
　 　 　 　
　 　 　
　 　
　 　 　

<html>
<head>

</head>

<table border= "1 "   width= "200 " >
     <tr>
        <td colspan="4"  >ss

</td>
     </tr>
     <tr>
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td> 
     </tr>
     <tr>
        <td   width= "25% "rowspan="2"> 　 </td>  
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td> 
     </tr>
     <tr>

<td   width= "25% "> 　 </td>  
        <td   width= "25% " rowspan="3"> 　 </td>  
        <td   width= "25% "> 　 </td> 
     </tr>
     <tr>
        <td   width= "25% " colspan="2"  > 　 </td>  
        <td   width= "25% "> 　 </td>

</tr>
     <tr>
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td>

</tr>
</table>

</html>

table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）的更多相关文章

  1. <table>标签总结（colspan跨列 ，rowspan跨行）

    table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" ...

  2. 【表格设置】HTML中合并单元格，对列组合应用样式，适应各浏览器的内容换行

    1.常用表格标签 普通    <table>           |           <tr>          |           |          <th ...

  3. [C#]合并单元格(行、列)

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak説明:控件ID指的是页面上面的Grid ...

  4. table合并单元格colspan和rowspan .

    colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...

  5. table合并单元格 colspan（跨列）和rowspan（跨行）

    colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...

  6. WPF DataGrid多表头/列头，多行头，合并单元格，一列占据多行

    先上效果图: 思路说明:这是两个DataGrid,没有嵌套,位置和高度保持一致,在加上ScrollViewer滚动条,这就像是在一个DataGrid中. 缺点: 因为最外层有透明的Border,所以没 ...

  7. css table 合并单元格

    1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列: 合并列的时候,比如co ...

  8. vue中 表头th 合并单元格，且表格列数不定的动态渲染方法

    吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把: 代码示例 da ...

  9. vue中 表头 th 合并单元格，且表格列数不定的动态渲染方法

    吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Ju ...

随机推荐

  1. remount issue on android 7.0

    http://blog.chinaunix.net/uid-23141914-id-5754416.html 最近在新版本的android 7.0上,发现filesystem的remount老是报“  ...

  2. 设置VS快捷代码片段

    一.自定义sinppets方式 1.在VS安装路径[D:\vs2013\VC\Snippets\2052\Visual C++]下新建一个snippt文件 2.添加代码 <?xml versio ...

  3. Today's harvest !!!

    今天将Mybatis的视频看到了第60集,其之前讲解了自表的主外键查询.例如一个新闻表中,有一级栏目,二级栏目,三级栏目,其中二级栏目的pid为一级栏目的id,如此种种. 而今天做的小项目中使用了 e ...

  4. Tensorflow1.5.0+cuda9.0+cudnn7.0+gtx1080+ubuntu16.04

    目录 Tensorflow1.5.0+cuda9.0+cudnn7.0+gtx1080+ubuntu16.04 0. 前记 1. 环境说明 2. 安装GTX1080显卡驱动 3. CUDA 9.0安装 ...

  5. trim()不兼容ie的问题及解决方法

    当输入 src.trim();时,ie浏览器不支持此属性和方法,解决方法: //ie兼容trim方法if(!String.prototype.trim) { String.prototype.trim ...

  6. ZOJ 2314 Reactor Cooling（无源汇上下界网络流）

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2314 题意: 给出每条边流量的上下界,问是否存在可行流,如果存在则输出. ...

  7. Maven简单的配置Junit测试及使用简单的mock

    1.maven依赖配置如下 <dependency> <groupId>org.mockito</groupId> <artifactId>mockit ...

  8. Splay树学习

    首先给出一论文讲的很好: http://www.docin.com/p-63165342.html http://www.docin.com/p-62465596.html 然后给出模板胡浩大神的模板 ...

  9. vim 安装vim-airline

    在.vimrc中添加 Plugin 'vim-airline/vim-airline' Plugin 'vim-airline/vim-airline-themes' 然后打开vim编辑器执行 :Pl ...

  10. JavaScript Number() Vs new Number()

    最近在优化一个页面时候.IDEA 提示我错误的使用了包装类.当时感觉很诧异. 随后.我上Stack Overflow上面查了一下,终于发现了问题所在. new Number('123') 与 Numb ...