如何让 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

如果表content太宽（如本例），除了更改内容以使浏览器能够以更窄的格式显示它之外，您无能为力。与前面的答案相反，如果内容太宽，将宽度设置为 100% 将完全没有效果（如该链接和this，演示）。如果可以的话，浏览器已经尝试将表格保持在左右边距内，只有在不能的情况下才求助于水平滚动条。

您可以更改内容以使表格更窄的一些方法：

• 减少列数（或许将一张巨石表拆成多个独立的表）
• 如果你在任何内容上使用 CSS

  white-space: nowrap

  （或旧的

  nowrap

  属性、

   

  、

  nobr

  元素等），看看你是否可以没有它们，以便浏览器具有包装该内容以降低宽度的选项。
• 如果您使用的边距、填充、边框等非常宽，请尝试减小它们的大小（但我相信您已经想到了）。

如果表格太宽但您没有看到它的充分理由（内容不是那么宽等），您将必须提供有关如何设计表格样式、周围环境的更多信息元素等。同样，默认情况下，浏览器会尽可能避免滚动条。

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

而不是使用 % 单位——另一个元素的宽度/高度——你应该使用

vh

和

vw

.
您的代码将是：

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

但是，如果文档小于

100vh

或

100vw

，那么您需要将大小设置为文档的大小。

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

Answer 5

在与视口宽度相关的单位中设置

font-size

，例如：

table { font-size: 0.9vw; }

当页面太窄时，这会导致字体不可读，但有时这是可以接受的。

Answer 6

将表格放入具有

的容器元素中

溢出：滚动； 最大宽度：95vw；

或使表格适合屏幕并溢出：滚动所有表格单元格。

Answer 7

您遇到的问题已经有很好的解决方案。每个人都忘记了 CSS 属性

font-size

：最后但并非最不重要的解决方案。可以将字体大小减小 2 到 3 个像素。它可能仍然对用户可见，并且您可以在某种程度上减小表格的宽度。这对我有用。我的表格有 5 列，其中 4 列完美显示，但第五列超出了视口。为了解决这个问题，我减小了字体大小，所有五列都显示在屏幕上。

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

供您参考，如果您的表格有太多列并且您无法减少，则将字体大小调小。它将摆脱水平滚动。有两个优点：你的移动网络风格将保持不变（没有水平滚动很好），当用户看到小尺寸时，大多数用户会放大到他们舒适的表格。

Answer 8

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;    
 }