如何調整表格大小以對應媒體屏幕大小？

我很難調整我的表格以適合媒體屏幕大小。現在的佈局通過媒體查詢來調整其內容。實際上，不需要滾動條。如何調整表格大小以對應媒體屏幕大小？

下面是一些代碼...

（1）HTML：

<div id="results"> 
</div>

雅，它真的很簡單。這個標籤實際上存在於其他一些保存內容的div中。這個特殊的div保存發出請求時從服務器發送的內容。當純文本是內容時，它會正確響應，但表格會導致問題。

這裏是我的CSS代碼...

（1）CSS爲#results

div#results { 
    width: 90%; 
    margin: 0 auto; 
    margin-top: 30px; 
}

（2）CSS的表：

table { 
    font-family: 'PT Sans', Arial, sans-serif; 
    color: #666; 
    font-size: 12px; 
    text-shadow: 1px 1px 0px #fff; 
    background: #eaebec; 
    margin: 20px; 
    border: #ccc 1px solid; 
    width: 80%; 
    margin: 0 auto; 
} 

table th { 
    padding: 21px 25px 22px 25px; 
    border-top: 1px solid #fafafa; 
    border-bottom: 1px solid #e0e0e0; 
    background: #ededed; 
} 

table th:first-child { 
    text-align: left; 
    padding-left:20px; 
} 

table tr { 
    text-align: center; 
    padding-left: 20px; 
} 

table td:first-child { 
    text-align: left; 
    padding-left: 20px; 
    border-left: 0px; 
} 

table td { 
    padding:8px; 
    border-top: 1px solid #ffffff; 
    border-bottom:1px solid #e0e0e0; 
    border-left: 1px solid #e0e0e0; 
    background: #fafafa; 
} 

table tr:hover td { 
    background: #f2f2f2; 
}

表的大小保持不變無論媒體屏幕大小如何。 CSS可能會使這一點很明顯。但是，在這種情況下可以做些什麼？如果我「擠」桌子，內容將難以辨認。例如，如果我想在智能手機上拉起桌子，我該如何修改桌子才能使用它？現在我有5列。有沒有辦法可以開始一個新的行，比如兩三列之後，以便內容不必被壓縮？

這是基本的想法;我希望我所說的關鍵是明確的。任何輸入讚賞。

來源

2013-07-21 Mlagma

有很多方法可以處理較小屏幕上的表格。很多網站做的是把它們放在一個div中，並將div分配爲100％的寬度並溢出：auto;然後他們爲表本身設置一個最小寬度，以保持數據的完整性而不會混淆表格。

當用戶到達一張對於他們的屏幕來說太大的表格時，所有用戶都會滾動，但由於它包含在100％寬度的div中並且溢出，所以不會中斷頁面的流動。

這只是一種方法，而且是最容易標記的方法。

希望有所幫助。

來源

2013-07-21 07:47:21

如何調整表格大小以對應媒體屏幕大小？

回答

相關問題