如何使 CSS 表格适合屏幕宽度？答案

【问题标题】：How can I make a CSS table fit the screen width?如何使 CSS 表格适合屏幕宽度？
【发布时间】：2011-05-13 08:01:09
【问题描述】：

当前表格太宽，导致浏览器添加水平滚动条。

【问题讨论】：

@define 表格的宽度然后你不会得到水平条。
@all: 好吧，我是不是错过了什么？ OP 说表格 “太宽，导致浏览器添加水平滚动条。” 并且有三个“使用 100% 的宽度”答案。如果桌子已经太宽，那不会有任何区别。它不适用于 CSS (jsbin.com/emivi4)，也不适用于 width 属性 (jsbin.com/emivi4/2)。
@T J 克劳德；水平条可能是因为绝对宽度大于浏览器宽度；将其设置为 100% 将确保它与浏览器具有相同的宽度。否决所有答案并不适合“我错过了什么吗？”
@TJ，他可能给出了比屏幕宽度更大的宽度，这显示了右侧的水平条...如果您为 table 提供 2000 px 宽度。在 1000px 监视器上，我们可能会看到水平滚动条,
@TJ，你为什么把他们都投下来，他们是对的，如果你 100%width 你不会碰到水平滚动条。

【解决方案1】：

CSS：

table { 
    table-layout:fixed;
}

使用 cmets 的 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;
    }
}

足够了。

【讨论】：

td { 溢出：隐藏；文本溢出：省略号； }
+ td { word-wrap: break-word; }
是的，但我怎样才能保持列宽的比例？使用fixed，一切都是一样的宽度..
谢谢！！第三个不错！所以这真的适用于移动设备吗？

【解决方案2】：

如果表格内容太宽（如this example），除了更改内容以使浏览器能够以更窄的格式显示之外，您无能为力.与之前的答案相反，如果内容太宽，将宽度设置为 100% 绝对没有效果（如该链接和 this one 所示）。浏览器已经尽可能地尝试将表格保持在左右边距内，如果不能，则只使用水平滚动条。

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

减少列数（也许将一张巨表拆分为多个独立的表）。
如果您在任何内容（或旧的nowrap 属性、&nbsp;、nobr 元素等）上使用 CSS white-space: nowrap，请查看是否可以不使用它们，以便浏览器可以选择包装该内容以减小宽度。
如果您使用非常宽的边距、填充、边框等，请尝试减小它们的大小（但我相信您已经想到了这一点）。

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

【讨论】：

【解决方案3】：

table { width: 100%; }

由于正文中使用了所有边距和填充，因此不会产生您期望的确切结果。所以如果脚本没问题，那就使用 Jquery。

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

如果没有，使用这个sn-p

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

您会注意到宽度完全覆盖了页面。

主要的事情是太无效了margin 和padding，就像我在正文中展示的那样，那么你就准备好了。

【讨论】：

对不起，T.J.我认为你有很多胆量说 jQuery ！= JavaScript。你甚至知道 jQuery 是"a JavaScript Library"。此外..我说IF scripts are OKAY已经完美地表达了自己
@Starx：你误读了我的评论。我的意思不是说 jQuery 不使用 JavaScript，而是认为任何进行 Web 开发的人都会自动使用 jQuery 的假设是无效的。很多人不这样做，他们要么不使用库，要么使用Prototype、YUI、Closure 或any of several others。毫无疑问，jQuery 是一个很棒的 JavaScript 库；将它（或脚本）引入关于 HTML/CSS 的问题是没有用的。
@T.J.克劳德和？您是否找到任何使用 HTML 或 CSS 的解决方案？如果没有，那么唯一的方法就是使用 JavaScript！
@Nyuszika7H：是什么让您认为 OP 的问题没有 HTML/CSS 解决方案？
@Nyuszika7H，实际上我已经发布了一个可以作为解决方案的 sn-p.. 但这取决于它之后的其他嵌套元素，表格的宽度是否为 100% ，但这只是正确使用边距和填充。

【解决方案4】：

将表格放入容器元素中，该元素具有

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

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

【讨论】：

【解决方案5】：

您应该使用 vh 和 vw，而不是使用 % 单位（另一个元素的宽度/高度）。
你的代码是：

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

但是，如果文档小于100vh 或100vw，则需要将大小设置为文档的大小。

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

【讨论】：

【解决方案6】：

在视口宽度相关单位中设置font-size，例如：

table { font-size: 0.9vw; }

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

【讨论】：

【解决方案7】：

您遇到的问题已经有了很好的解决方案。每个人都忘记了 CSS 属性font-size：最后但并非最不重要的解决方案。可以将字体大小减小 2 到 3 个像素。用户可能仍然可以看到它，并且您可以在一定程度上减小表格的宽度。这对我有用。我的表格有 5 列，其中 4 列完美显示，但第五列超出了视口。为了解决这个问题，我减小了字体大小，并将所有五列都放在屏幕上。

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

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

【讨论】：