CSS中的自適應表格是指表格能夠隨著瀏覽器視口的大小而自動調整其寬度,以便在不同設備上實現最佳顯示效果。
下面是一個示例CSS代碼,其中使用了百分比寬度來實現自適應效果:
table { width: 100%; border-collapse: collapse; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #4CAF50; color: white; }
上述代碼中,我們首先將表格的寬度設置為100%。這意味著表格將占據其父元素的整個寬度。接下來,我們舍棄了表格默認的邊框樣式,使用了css的border-collapse屬性來合并表格單元格之間的邊框線。
在單元格數據的樣式方面,我們給th和td元素設置了相同的內邊距、文本對齊方式和底部的邊框線。我們還使用了CSS的background-color屬性來指定表頭行的背景色,color屬性來設置文本顏色。
總體而言,以上CSS代碼提供了一個基本的自適應表格樣式,可根據實際需求進行調整和擴展。