在使用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行距內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!