在PHP中，創建一個響應式表格通常涉及到使用HTML、CSS和JavaScript。這里是一個簡單的響應式表格設計方法：
<div>元素包裹表格，并為其添加一個類名，例如table-responsive。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
</body>
</html>
styles.css）中編寫樣式以實現響應式表格。我們將使用媒體查詢來根據屏幕尺寸調整表格樣式。/* Basic table styling */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* Responsive styles */
@media (max-width: 767px) {
.table-responsive {
overflow-x: auto;
}
table {
display: block;
}
th, td {
display: inline-block;
white-space: nowrap;
}
}
這個示例中的響應式表格將在屏幕寬度小于767像素時變為水平滾動。你可以根據需要調整媒體查詢中的寬度值。
注意：這個示例沒有使用任何JavaScript代碼，因為響應式表格的實現主要依賴于HTML和CSS。然而，你可以根據需要使用JavaScript（例如jQuery）來實現更復雜的交互和功能。
