近年來，隨著智能手機的普及，越來越多的人習慣在手機上查看網頁。然而，一些傳統的網頁元素，如表格，經常會在手機上顯示出錯。這時，CSS就派上用場了。

CSS是一種用于控制網頁樣式的語言。通過CSS，我們可以改變網頁元素的外觀、排版和行為。在手機上顯示表格時，我們可以利用CSS的媒體查詢功能，調整表格的樣式。

下面是一個簡單的表格樣例：

姓名
年齡
性別
小明
18
男
小紅
20
女

在手機上，該表格很有可能會被擠壓變形，難以查看。我們可以為它添加一個CSS媒體查詢來改善它在移動設備上的顯示效果。

@media only screen and (max-width: 600px) {
table, thead, tbody, th, td, tr { 
display: block; 
}
tr { 
border: 1px solid #ccc; 
}
td { 
border: none; 
border-bottom: 1px solid #eee; 
position: relative;
padding-left: 50%; 
}
td:before { 
position: absolute;
top: 6px;
left: 6px;
width: 45%; 
padding-right: 10px; 
white-space: nowrap; 
}
td:nth-of-type(1):before { 
content: "姓名"; 
}
td:nth-of-type(2):before { 
content: "年齡"; 
}
td:nth-of-type(3):before { 
content: "性別"; 
}
}

經過CSS的處理后，該表格在手機上將會被正確地對齊、排版和渲染，使得用戶能夠輕松地查看到其中的內容。這就是CSS的威力所在。

總的來說，在移動設備上顯示表格時，我們需要利用CSS的媒體查詢功能，為表格添加適當的樣式。這不僅可以讓表格在移動設備上更易讀，也可以提升用戶的使用體驗。讓我們一起來學習并掌握這些技巧吧。