表格是網(wǎng)站中常用的元素之一，而表格的移動(dòng)問題是Web開發(fā)者所必須要解決的問題之一。這篇文章將介紹一些基本的表格移動(dòng)的css技巧。

/* 針對(duì)大屏幕設(shè)備的樣式 */
@media (min-width: 768px) {
/* 將表格設(shè)置為可滾動(dòng) */
table {
overflow-x: auto;
}
}
/* 針對(duì)小屏幕設(shè)備的樣式 */
@media (max-width: 767px) {
/* 隱藏表格中某些列 */
table td:nth-of-type(3),
table th:nth-of-type(3) {
display: none;
}
/* 將表格行轉(zhuǎn)換為列 */
table,
thead,
tbody,
th,
td,
tr {
display: block;
}
/* 設(shè)置表頭 */
thead {
position: absolute;
top: -9999px;
left: -9999px;
}
/* 移動(dòng)數(shù)據(jù) */
tr {
border: 1px solid #999;
/* 顏色交替顯示 */
background: #f8f8f8;
margin-bottom: 15px;
}
/* 設(shè)置單元格 */
td {
/* 方便區(qū)分 */
border: none;
position: relative;
padding-left: 50%;
}
/* 設(shè)置單元格內(nèi)容 */
td:before {
/* 移回左側(cè) */
position: absolute;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/* 設(shè)置表頭 */
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查詢針對(duì)不同大小的設(shè)備使用不同的CSS樣式。當(dāng)屏幕寬度小于767像素時(shí)，表格的一些列將被隱藏，表格行還將轉(zhuǎn)換為列，以便更好地顯示在手機(jī)上。

總的來說，在表格移動(dòng)方面，這需要對(duì)表格進(jìn)行重新設(shè)計(jì)和布局。上述代碼只能提供一些基本的思路和技巧，具體的樣式應(yīng)根據(jù)實(shí)際需要進(jìn)行調(diào)整。