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

随机推荐

478. Generate Random Point in a Circle
1. 问题给定一个圆的半径和圆心坐标,生成圆内点的坐标. 2. 思路简单说 (1)在圆内随机取点不好做,但是如果画出这个圆的外接正方形,在正方形里面采样就好做了. (2)取两个random确定正方 ...
python webdriver api-操作富文本框
操作富文本框-就是邮件正文部分,可以选字体啥的第一种方式: 一般都是在iframe里,要切进去,一般是”html/body”,编辑之后,再切出来,然后再send_keys就完事儿 #encoding ...
20145302张薇《网络对抗技术》逆向及BOF基础实践
20145302张薇 <网络对抗技术>逆向及BOF基础实践实验内容实践对象:名为20145302的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单 ...
20155201 实验一《Java开发环境的熟悉》实验报告
20155201 实验一<Java开发环境的熟悉>实验报告一.实验内容 1.使用JDK编译.运行简单的Java程序 2.使用IDEA 编辑.编译.运行.调试Java程序. 二.练习题目 ...
TrueCrypt简介及TrueCrypt 7.1a Source.zip源码在VS2008下的编译过程
转载:http://blog.csdn.net/cncrypt/article/details/51565493 转载:http://www.cnblogs.com/shenjieblog/p/521 ...
sqlite的缺点和限制
随着查询变大变复杂,查询时间使得网络调用或者事务处理开销相形见绌, 这时一些大型的设计复杂的数据库开始发挥作用了. 虽然SQLite也能处理复杂的查询,但是它没有精密的优化器或者查询计划器. SQLi ...
js做小数运算精度问题
当js做小数运算时存在bug,大概是因为二进制和十进制转换之间的关系. bug如图解决方案 1.运算结果后,乘以100再除以100.网上推荐这种方法但是乘以1000再除以1000依然存在精度问题 2 ...
UVALive-3487 Duopoly（最小割）
题目大意:有两家公司都想向政府申请某些资源的使用权,并且他们都提供了一些申请列表,列表中含有申请费用和资源种类,同一家公司的申请列表之间不含有重复的资源.政府只可以完整地接受和拒绝谋一份申请列表,问政 ...
微信小程序navigateTo /redirectTo/navigateBack 三者区别
navigateTo 不会将旧页面出栈: redirectTo 会将旧页面出栈,再将需要跳转到的页面入栈: navigateBack 则是将页面栈最后一个元素出栈,因此倒数第二个元素会成为最后一个元素 ...
Thinking in Java之衍生类和基础类的初始化顺序
<Thinking in Java>书里的例子,我又稍微修改了下代码: class Real{ public Real(String index) { // TODO Auto-gener ...

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