HTML中缩短table行距有什么技巧-群英

上一篇：HTML添加下划线怎样做，有几种实现方式下一篇：HTML页面中table宽度设置无效怎么处理

这篇文章主要介绍了HTML中缩短table行距有什么技巧相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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的间距；

如：

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

以上就是关于“HTML中缩短table行距有什么技巧”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

标签： table行距

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：HTML添加下划线怎样做，有几种实现方式下一篇：HTML页面中table宽度设置无效怎么处理