您现在的位置是：网站首页> 编程资料编程资料

HTML table行距的改变方法示例HTML Table 空白单元格补全的实现方法html解决table设置宽度无效的问题html中table固定头部表格tbody可上下左右滑动详解html中表格table的行列合并问题解决html table实现复杂表头的示例代码HTML页面自适应宽度的table(表格)HTML table 表格边框的实现思路html Table 表头固定的实现html中table表格的内容水平和垂直居中显示HTML table鼠标拖拽排序功能

2023-10-08 267人已围观

简介这篇文章主要介绍了HTML table行距的改变方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

在使用HTML表的时候有时候需要我们改变行距，但是改变margin，padding，collapse等方法效果都不是很好。在这里我找到了一个实用的小技巧。利用display属性+margin来实现。
例子：

 tr{margin-top:0px;padding:0px;display:block;}

我们来看一下对比

 tr{margin-top:-10px;padding:0px;display:block;}

可以很明显的看到行距缩短了不少。

其他解决方法

问题提出：

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的间距；

如：

到此这篇关于HTML table行距的改变方法示例的文章就介绍到这了,更多相关HTML table行距内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！