9.1 滾動 (Scroll)
表格常用於顯示結構化數據，但在小屏幕裝置上顯示可能會很麻煩。響應式表格可以改善在不同裝置上的數據體驗，包括手機和平板。咱們來看看幾個創建響應式表格的技巧。
創建響應式表格的簡單方法之一是添加水平滾動。這種方法保留了表格結構，並允許用戶在窄屏幕上水平滾動數據。
範例：
CSS
.table-container {
overflow-x: auto;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>含滾動的響應式表格</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
<th>列 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>數據 1</td>
<td>數據 2</td>
<td>數據 3</td>
<td>數據 4</td>
</tr>
<!-- 其他行 -->
</tbody>
</table>
</div>
</body>
</html>
代碼解釋：
.table-container: 當表格超出容器寬度時，添加水平滾動table: 設置表格寬度為100%並合併單元格邊框
9.2 隱藏列 (Column Hiding)
這種方法是在窄屏幕上隱藏較不重要的列，以便核心數據保持可見。可以使用媒體查詢實現。
範例：
CSS
@media (max-width: 600px) {
.hide {
display: none;
}
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>含隱藏列的響應式表格</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>列 1</th>
<th>列 2</th>
<th class="hide">列 3</th>
<th class="hide">列 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>數據 1</td>
<td>數據 2</td>
<td class="hide">數據 3</td>
<td class="hide">數據 4</td>
</tr>
<!-- 其他行 -->
</tbody>
</table>
</body>
</html>
代碼解釋：
.hide: 使用媒體查詢在寬度小於600px的屏幕上隱藏某些列table: 設置表格寬度為100%並合併單元格邊框
9.3. 堆疊方式 (Stacking)
堆疊方式將表格的行轉換為塊，這些塊在窄屏幕上縱向排列。這使得表格在移動裝置上更易於閱讀。
範例：
CSS
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
td {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
td::before {
content: attr(data-label);
font-weight: bold;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>含堆疊方式的響應式表格</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
<th>列 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="列 1">數據 1</td>
<td data-label="列 2">數據 2</td>
<td data-label="列 3">數據 3</td>
<td data-label="列 4">數據 4</td>
</tr>
<!-- 其他行 -->
</tbody>
</table>
</body>
</html>
代碼解釋：
- 媒體查詢: 將表格轉換為塊元素，適用於寬度小於600px的屏幕
td::before: 在每個單元格的值前添加具有列名稱的偽元素，以保持數據上下文
9.4. 轉換為卡片布局 (Card Layout)
這個方法將每個表格行轉換為窄屏幕上的單獨卡片。這幫助提高移動裝置上的數據可讀性。
範例：
CSS
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
tr {
margin-bottom: 10px;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
td {
display: flex;
justify-content: space-between;
padding: 10px 0;
border: none;
}
td::before {
content: attr(data-label);
font-weight: bold;
margin-right: 10px;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>含卡片布局的響應式表格</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
<th>列 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="列 1">數據 1</td>
<td data-label="列 2">數據 2</td>
<td data-label="列 3">數據 3</td>
<td data-label="列 4">數據 4</td>
</tr>
<!-- 其他行 -->
</tbody>
</table>
</body>
</html>
代碼解釋：
- 媒體查詢: 將表格轉換為塊元素並在寬度小於600px的屏幕上創建卡片
td::before: 在每個單元格的值前添加具有列名稱的偽元素，以保持數據上下文
9.5 使用 CSS Frameworks
許多 CSS 框架，如 Bootstrap，提供用於創建響應式表格的內建解決方案。使用這些框架簡化了過程，並提供了預製的樣式和組件。
使用 Bootstrap 的範例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>含 Bootstrap 的響應式表格</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-responsive">
<thead>
<tr>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
<th>列 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>數據 1</td>
<td>數據 2</td>
<td>數據 3</td>
<td>數據 4</td>
</tr>
<!-- 其他行 -->
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
代碼解釋：
table.table-responsive: Bootstrap類，為窄屏幕上的表格添加水平滾動container: Bootstrap類，居中並設定容器的最大寬度
GO TO FULL VERSION