欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

表格移動css

黃文隆2年前9瀏覽0評論

表格是網站中常用的元素之一,而表格的移動問題是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像素時,表格的一些列將被隱藏,表格行還將轉換為列,以便更好地顯示在手機上。

總的來說,在表格移動方面,這需要對表格進行重新設計和布局。上述代碼只能提供一些基本的思路和技巧,具體的樣式應根據實際需要進行調整。