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

Posted 2023-03-05

【中文标题】如何使 CSS 表格适合屏幕宽度？

【英文标题】：How can I make a CSS table fit the screen width?

【发布时间】：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 属性、 、nobr 元素等）上使用 CSS white-space: nowrap，请查看是否可以不使用它们，以便浏览器可以选择包装该内容以减小宽度。 如果您使用非常宽的边距、填充、边框等，请尝试减小它们的大小（但我相信您已经想到了这一点）。

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

【参考方案3】：

table  width: 100%; 

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

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

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

<style>
    body  margin:0;padding:0; 
</style>
<table  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 样式将保持不变（没有水平滚动也很好），当用户看到小尺寸时，大多数用户会将表格放大到他们舒适的水平。