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

随机推荐

Underscore-逐行分析
标签: // Underscore.js 1.8.3// http://underscorejs.org// (c) 2009-2015 Jeremy Ashkenas, DocumentCloud ...
git中Untracked files如何清除
$ git status # On branch test # Untracked files: # (use "git add <file>..." to inclu ...
luogu p3371 单源最短路径（dijkstral
本来我写的对的我就多手写了个 ios::sync_with_stdio(false); 我程序里面用了cin 还有scanf 本来想偷偷懒我就说我查了半天错根本找不到的啊... 后来交了几次 ...
sonar runner的配置
#Configure here general information about the environment, such as SonarQube DB details for example ...
python swap
swap里面的a,b 不会影响函数作用域外面的变量 java也不可以的吧:python里面没有指针,你可以认为所有的东西都是指向的内容,但是不要试图去改变指针的值其实我觉得所有的对象都是不可变对象, ...
理解if __name__ == '__main__':
一开始没怎么注意这个语句,这两天在模拟知乎登陆时准备刨根问底了,先看两行代码片段第一个例子:这是在login.py文件的一部分,其他我们忽略,只关注print()函数的内容 import time ...
CSS再学习之背景色背景图片
背景色 p {background-color: gray;} 如果您希望背景色从元素中的文本向外少有延伸,只需增加一些内边距. p {background-color: gray; padding: ...
微信分享签名Java代码实现
最近写了一个小微信签名功能,记录一下希望用到的朋友可以参考下. RestController @RequestMapping("/api/wx") public class Wei ...
IOS-多线程（NSOperation）
一.基础用法 // // ViewController.m // IOS_0120_NSOperation // // Created by ma c on 16/1/20. // Copyright ...
HALCON之喷码OCR识别案例
一个喷码识别的案例 1 read_image (Image, 'D:/用户目录/Desktop/2.png') 2 3 rgb1_to_gray(Image, Image) 4 5 get_image ...

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