我爲什麼掙扎着將桌子放在小屏幕上？ （<480px）

Question

我知道代碼將在沒有媒體查詢的情況下將表格居中，但是這裏發生了什麼問題導致它不能將其居中少於480px？

CSS：

<style> 
@media screen and (min-width: 480px){ 
.beta {margin:0px auto;} 
.rwd-break { display: none; } 
} 
</style> 

HTML：

<table class="beta"> 
<tbody> 
    <tr> 
    <th colspan="3">TITLE HERE</th> 
    </tr> 
    <tr> 
    <td class="1"><b>16' x 36'</td> 
<td>576 ft.²</td> 
<td>$38,750</td> 
</tr> 
<tr> 
<td><b>16' x 40'</td> 
<td>640 ft.²</td> 
<td>$39,900</td> 
</tr> 
</table> 

Answer 1

你要這個？ See this fiddle

@media screen and (max-width: 480px){ 
    .beta {margin:0px auto;} 
    .rwd-break { display: none; } 
    } 

使用max-width而不是min-width到中心480像素下表。