HTML table行距的改变方法示例

时间2024-01-27 17:15:02发布访客分类HTML浏览909

导读：收集整理的这篇文章主要介绍了HTML table行距的改变方法示例，觉得挺不错的，现在分享给大家，也给大家做个参考。在使用HTML表的时候有时候需要我们改变行距，但是改变margin，padding，collapse等方法效果都...

收集整理的这篇文章主要介绍了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行距的改变方法示例的文章就介绍到这了,更多相关HTML table行距内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

HTML table