簡單寫個範例
codepen 1920 顯示不太出來在自己改 max-width
<table>
<thead>
<tr>
<th>id</th>
<th>no</th>
<th>name
<div class="low-screen">unit</div>
</th>
<th>price</th>
<th>num</th>
<th class="lg-screen">unit</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>0
<div class="low-screen">0</div>
</td>
<td>0</td>
<td>0</td>
<td class="lg-screen">0</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1
<div class="low-screen">1</div>
</td>
<td>1</td>
<td>1</td>
<td class="lg-screen">1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2
<div class="low-screen">2</div>
</td>
<td>2</td>
<td>2</td>
<td class="lg-screen">2</td>
</tr>
</tbody>
</table>
* {
margin: 0;
padding: 0;
list-style: none;
}
table {
width: 100%;
text-align: center;
border: 1px solid #ddd;
border-collapse: collapse;
}
table th, table td {
border: 1px solid #ddd;
}
.low-screen {
display: none;
}
@media screen and (max-width: 720px) {
.low-screen {
display: block;
}
.lg-screen {
display: none;
}
}