CSS響應式數據表,是一種在不同設備上自適應的表格布局。它可以讓數據表在桌面、平板和移動設備上都顯示合適。以下是實現這種數據表的代碼示例:
.table { width: 100%; border-collapse: collapse; } .table th { font-weight: bold; background-color: #ccc; text-align: left; border: 1px solid #000; padding: 5px; } .table td { border: 1px solid #000; padding: 5px; } /* 在桌面上將表格寬度分為三列 */ @media (min-width: 768px) { .table { width: 80%; } .table td, .table th { width: 33.33%; } } /* 在平板上將表格寬度分為兩列 */ @media (min-width: 576px) and (max-width: 767px) { .table td, .table th { width: 50%; } } /* 在移動設備上將表格寬度設為100% */ @media (max-width: 575px) { .table td, .table th { width: 100%; } }
這段CSS代碼中使用了媒體查詢,通過屏幕寬度來改變表格的樣式。在桌面上,表格會被分為三列,平板上則為兩列,而在移動設備上則完全顯示一列。
這是一個非常實用的技術,可以讓你的數據表格在不同設備上都展現得整潔美觀。當然,要實現這個效果還需要結合HTML和JavaScript的編寫,不過只要有這個CSS基礎,其他部分就不是很難了。