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的高度和宽度

做网页的时候经常会遇到各种各样的问题，经常遇到的一个就是会碰到表格宽度对不齐的问题。首先，来分析一下这三个标签中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这两个属性用于创建特殊的表格。

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

</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>

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

</tr>
</table>

</html>

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

<table>标签总结（colspan跨列，rowspan跨行）
table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" ...
【表格设置】HTML中合并单元格，对列组合应用样式，适应各浏览器的内容换行
1.常用表格标签普通 <table> | <tr> | | <th ...
[C#]合并单元格(行、列)
详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak説明:控件ID指的是页面上面的Grid ...
table合并单元格colspan和rowspan .
colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...
table合并单元格 colspan（跨列）和rowspan（跨行）
colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...
WPF DataGrid多表头/列头，多行头，合并单元格，一列占据多行
先上效果图: 思路说明:这是两个DataGrid,没有嵌套,位置和高度保持一致,在加上ScrollViewer滚动条,这就像是在一个DataGrid中. 缺点: 因为最外层有透明的Border,所以没 ...
css table 合并单元格
1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列: 合并列的时候,比如co ...
vue中表头th 合并单元格，且表格列数不定的动态渲染方法
吐槽今天,在vue中遇到复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把: 代码示例 da ...
vue中表头 th 合并单元格，且表格列数不定的动态渲染方法
吐槽今天,在vue中遇到复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Ju ...

随机推荐

HIVE: 自定义TextInputFormat (旧版MapReduceAPI ok, 新版MapReduceAPI实现有BUG？)
我们的输入文件 hello0, 内容如下: xiaowang 28 shanghai@_@zhangsan 38 beijing@_@someone 100 unknown 逻辑上有3条记录, 它们以 ...
OpenCV图像的轮廓的匹配
http://blog.sina.com.cn/s/blog_67a7426a0101cxl0.html 一个跟轮廓相关的最常用到的功能是匹配两个轮廓.如果有两个轮廓,如何比较它们;或者如何比较一个轮 ...
Docker 版本升级
当前系统版本:Centos 7.4 x64 删除老版本docker sudo yum remove docker docker-common docker-selinux docker-engine ...
sqlite的缺点和限制
随着查询变大变复杂,查询时间使得网络调用或者事务处理开销相形见绌, 这时一些大型的设计复杂的数据库开始发挥作用了. 虽然SQLite也能处理复杂的查询,但是它没有精密的优化器或者查询计划器. SQLi ...
linux下查看cpu核心数
1.查看物理CPU个数 cat /proc/cpuinfo |grep "physical id"|sort|uniq|wc -l 2.查看每个物理CPU含有的core个数 cat ...
POJ 3613 Cow Relays（floyd+快速幂）
http://poj.org/problem?id=3613 题意: 求经过k条路径的最短路径. 思路: 如果看过<矩阵乘法在信息学的应用>这篇论文就会知道现在我们在邻接矩阵中保存距离, ...
UVa 10917 林中漫步
https://vjudge.net/problem/UVA-10917 题意: 给出一个图,求出从1走到2共有多少种走法.前提是他只沿着满足如下条件的道路(A,B)走:存在一条从B出发回家的路径,比 ...
简单使用grunt、bower工具合并压缩js和css
前段时间因为项目中的报表写了一个Jquery插件,开源到github上,参考以往大神们写的插件的姿势,决定搞了像模像样一点.言归正传.前端工程师对这些工具:Node,bower,grunt,npm这些 ...
Hardcoded string should use @string resource 警告
在布局文件中,文本的设置使用如下写法时会有警告:Hardcoded string "下一步", should use @string resource <Button and ...
bzoj1257: [CQOI2007]余数之和整除分块
题意:给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + - + k mod n的值其中k mod i表示k除以i的余数.例如j(5, 3)=3 mod ...

table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）