在制作網頁時,表格是我們經常用到的一個元素。而表格中的線條往往會影響整個界面的美觀度。今天我們就來介紹如何使用CSS控制表格中的線條,只保留橫線,讓表格更加簡潔美觀。
table{ border-collapse: collapse; } td, th{ padding: 10px; border-bottom: 1px solid black; //保留橫線 border-left: none; border-right: none; border-top: none; }
首先,我們需要將表格的邊框合并為一條線,只需要在table元素中添加屬性border-collapse:collapse;即可。
接著,在每一個單元格(td或th)中,我們需要取消其左、右、上的線條,只保留下邊的橫線。這可以通過設置border-left:none;、border-right:none;、border-top:none;來實現,同時設置border-bottom:1px solid black;來保留橫線。
通過以上CSS樣式控制,我們可以輕松地只保留表格中的橫線,讓表格更加簡潔美觀,達到更好的視覺效果。