這篇文章主要介紹了HTML table行距的改變方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
在使用HTML表的時(shí)候有時(shí)候需要我們改變行距，但是改變margin，padding，collapse等方法效果都不是很好。在這里我找到了一個(gè)實(shí)用的小技巧。利用display屬性+margin來實(shí)現(xiàn)。
例子：
tr{margin-top:0px;padding:0px;display:block;}
我們來看一下對比
tr{margin-top:-10px;padding:0px;display:block;}
可以很明顯的看到行距縮短了不少。
其他解決方法
問題提出：
table中的tr的默認(rèn)display:table-row，雖然可以修改為display：block但是就失去了tr特有的顯示效果，如(td自動(dòng)對齊)；
并且在tr中對起設(shè)定padding是有用的，可以增加內(nèi)邊距，但是設(shè)定margin是沒有用的，tr的外間距依然是0；
解決方案：
css的兩個(gè)屬性：border-collapse:collapse / separate & border-spacing:10px 10px；
需要用border-collapse & border-spacing聯(lián)合控制tr的間距；
如：
<table style="border-collapse:separate; border-spacing:10px;">
<tr></tr>
</table>
到此這篇關(guān)于HTML table行距的改變方法示例的文章就介紹到這了,更多相關(guān)HTML table行距內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
來源：腳本之家
鏈接：https://www.jb51.net/web/738286.html
申請創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
