CSS圓角表格是一種使用圓角樣式設計的表格,它與傳統的表格不同,可以讓網頁看起來更加美觀。在CSS中,可以通過border-radius屬性來設置元素的邊框圓角,而表格的圓角則需要通過特定的樣式來實現。下面是一個基本的CSS圓角表格:
.table { border-collapse: collapse; border-spacing: 0; width: 100%; max-width: 900px; margin: auto; } .table th, .table td { text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 5px; } .table th { background-color: #f2f2f2; }
在這個代碼示例中,我們定義了一個名為“table”的類,用于指定所有表格的樣式。我們設置了表格的寬度、邊距等樣式,以及指定了表格單元格的圓角樣式。使用border-radius屬性來實現表格圓角效果,這里我們將表格單元格的圓角設置為5像素。除了表格單元格的圓角樣式,我們還設置了表格標題(th)的背景色,讓表格的標題更加突出。如果您想要自定義表格樣式,可以根據自己的需求進行修改和調整。