CSS中的表格可以使用響應式設計來實現更好的適應不同的屏幕大小和設備類型。在設計響應式表格的時候,我們需要考慮以下幾點:
1. 設置表格寬度為100%。
table { width: 100%; }
2. 隱藏表格頭部的列。
thead th { display: none; }
3. 使用偽元素“before”來添加表頭列的標題。
@media screen and (max-width: 767px) { table thead tr { position: absolute; top: -9999px; left: -9999px; } table tbody tr:nth-of-type(2n+1) { background-color: #f8f8f8; } table td:before { content: attr(data-th); width: 120px; display: inline-block; font-weight: bold; padding: 1em .5em; } }
4. 使用CSS3中的媒體查詢來設置表格在不同屏幕大小下顯示效果。
@media screen and (max-width: 480px) { table td { display: block; text-align: right; } table td:before { content: attr(data-th); float: left; width: 50%; margin-left: -50%; font-weight: bold; } }
通過以上的CSS樣式設置,我們可以實現一個響應式表格,在不同設備屏幕大小下都能夠顯示出最佳的效果,提高網站的可讀性和用戶體驗。