如何使 CSS 表格適合屏幕寬度？

Question

當前表格太寬，導致瀏覽器添加水平滾動條。

Answer 1

CSS：

table { 
    table-layout:fixed;
}

使用評論中的 CSS 進行更新：

td { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word;
}

對於手機，我保留了表格寬度，但為表格分配了一個額外的 CSS 類以啟用水平滾動（表格將不再越過手機屏幕）：

@media only screen and (max-width: 480px) {
    /* horizontal scrollbar for tables if mobile screen */
    .tablemobile {
        overflow-x: auto;
        display: block;
    }
}

足夠了。

Answer 2

如果表格內容太寬（如本例所示），您只能更改內容以使瀏覽器能夠以更窄的格式顯示它。 與前面的答案相反，如果內容太寬，將寬度設置為 100% 將完全沒有效果（如該鏈接和此鏈接所示）。 如果可以的話，瀏覽器已經嘗試將表格保持在左邊距和右邊距內，並且只有在不能時才求助於水平滾動條。

您可以通過一些方式更改內容以使表格更窄：

• 減少列數（也許將一張巨石表分解成多個獨立的表）。
• 如果你在任何內容上使用 CSS white-space: nowrap （或舊的nowrap屬性，   ，一個nobr元素等），看看你是否可以沒有它們，以便瀏覽器可以選擇包裝它content 以保持寬度。
• 如果您使用的邊距、填充、邊框等非常寬，請嘗試減小它們的大小（但我相信您已經想到了）。

如果表格太寬但您沒有看到它的充分理由（內容不是那么寬等），您將必須提供有關如何設計表格樣式、周圍元素的更多信息等等。同樣，默認情況下，瀏覽器會盡可能避免滾動條。

Answer 3

table { width: 100%; }

由於正文中使用了所有邊距和填充，因此不會產生您期望的確切結果。 所以如果腳本沒問題，那么使用 Jquery。

$("#tableid").width($(window).width());

如果沒有，請使用此代碼段

<style>
    body { margin:0;padding:0; }
</style>
<table width="100%" border="1">
    <tr>
        <td>Just a Test
        </td>
    </tr>
</table>

您會注意到寬度完全覆蓋了頁面。

最主要的是取消margin和padding ，就像我在正文中顯示的那樣，然后你就設置好了。

Answer 4

以與視口寬度相關的單位設置font-size ，例如：

table { font-size: 0.9vw; }

當頁面太窄時，這會使字體不可讀，但有時這是可以接受的。

Answer 5

將表放在具有的容器元素中

溢出：滾動； 最大寬度：95vw；

或者使表格適合屏幕並溢出：滾動所有表格單元格。

Answer 6

不要使用 % 單位——另一個元素的寬度/高度——你應該使用vh和vw 。
您的代碼將是：

your table {
  width: 100vw;
  height: 100vh;
}

但是，如果文檔小於100vh或100vw ，則需要將大小設置為文檔的大小。

(table).style.width = window.innerWidth;
(table).style.height = window.innerHeight;

Answer 7

您遇到的問題已經有很好的解決方案。 每個人都忘記了 CSS 屬性font-size ：最后但並非最不重要的解決方案。 可以將字體大小減小 2 到 3 個像素。 它可能仍然對用戶可見，並且您可以在某種程度上減小表格的寬度。 這對我有用。 我的表格有 5 列，其中 4 列完美顯示，但第五列超出了視口。 為了解決這個問題，我減小了字體大小，所有五列都顯示在屏幕上。

table th td {
  font-size: 14px;
}

供您參考，如果您的表格有太多列並且您無法減少，則將字體大小調小。 它將擺脫水平滾動。 有兩個優點：你的移動網絡風格將保持不變（沒有水平滾動很好），當用戶看到小尺寸時，大多數用戶會放大表格到他們舒適的水平。

Answer 8

怎么樣：

table { 
   width: 100%; 
}

也許你有一些太大的圖像，導致表格更寬。

另外，請檢查您的表在其他瀏覽器中的外觀。