表格是網站中常用的元素之一,而表格的移動問題是Web開發者所必須要解決的問題之一。這篇文章將介紹一些基本的表格移動的css技巧。
/* 針對大屏幕設備的樣式 */ @media (min-width: 768px) { /* 將表格設置為可滾動 */ table { overflow-x: auto; } } /* 針對小屏幕設備的樣式 */ @media (max-width: 767px) { /* 隱藏表格中某些列 */ table td:nth-of-type(3), table th:nth-of-type(3) { display: none; } /* 將表格行轉換為列 */ table, thead, tbody, th, td, tr { display: block; } /* 設置表頭 */ thead { position: absolute; top: -9999px; left: -9999px; } /* 移動數據 */ tr { border: 1px solid #999; /* 顏色交替顯示 */ background: #f8f8f8; margin-bottom: 15px; } /* 設置單元格 */ td { /* 方便區分 */ border: none; position: relative; padding-left: 50%; } /* 設置單元格內容 */ td:before { /* 移回左側 */ position: absolute; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* 設置表頭 */ td:nth-of-type(1):before { content: "Name"; } td:nth-of-type(2):before { content: "Age"; } td:nth-of-type(3):before { content: "Gender"; } }
上述代碼中,使用了CSS3的@media查詢針對不同大小的設備使用不同的CSS樣式。當屏幕寬度小于767像素時,表格的一些列將被隱藏,表格行還將轉換為列,以便更好地顯示在手機上。
總的來說,在表格移動方面,這需要對表格進行重新設計和布局。上述代碼只能提供一些基本的思路和技巧,具體的樣式應根據實際需要進行調整。