CSS中,表格是經常用到的元素之一。表格是由tr(行)和td(單元格)組成的。在表格中,我們有時需要設置行之間的間距以體現更好的視覺效果。下面介紹一下如何使用CSS設置表格中tr縱向間距。
table { border-collapse: collapse; margin-top: 20px; } tr { height: 40px; background-color: #eee; }
上面的代碼中,我們首先將表格的邊框合并,然后通過margin-top屬性設置表格與上方元素的距離。接著,我們設置tr的高度為40px,設置tr的背景顏色為#eee,實現了間距的設置。
table { border-collapse: collapse; margin-top: 20px; } tr { height: 40px; background-color: #eee; margin-bottom: 10px; }
此外,我們還可以通過為tr設置margin-bottom屬性,來實現行之間的間距。上述代碼中,我們為tr設置了10px的margin-bottom,實現了行之間的間距效果。
總之,CSS中設置tr縱向間距,可以通過設置行高、背景顏色、以及設置margin-top和margin-bottom等方式實現。這些方法能讓你更加靈活的控制表格的外觀并達到更好的視覺效果。
上一篇css tr標簽自動換行
下一篇vue的側邊欄