CSS是一種用于網頁設計的樣式表語言,可以控制網頁元素的外觀和排版。在排版中,表格是一種非常常見的元素。表格的外觀通常由邊框和單元格組成。在有些情況下,我們可能只想顯示表格的外邊框,而不顯示單元格之間的分隔線。下面我們就通過CSS來實現這個效果。
table { border-collapse: collapse; } table th, table td { border: none; padding: 10px; } table td:first-child { border-left: 1px solid #ccc; } table td:last-child { border-right: 1px solid #ccc; } table tr:first-child td { border-top: 1px solid #ccc; } table tr:last-child td { border-bottom: 1px solid #ccc; }
首先,我們使用border-collapse
屬性來合并單元格的邊框,使之成為一條線。其次,我們使用border: none
清除表格單元格的默認邊框,以便后面手動設置邊框樣式。最后,我們使用偽類選擇器(:first-child
和:last-child
)來添加左右和上下的邊框。
這種方法可以很好地控制表格的外觀,使之更美觀和整潔。此外,我們還可以通過調整上下和左右的像素值來改變邊框的寬度。
上一篇css只定義下劃線