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

Question

目前表格过宽，导致浏览器出现水平滚动条。

- David B

---

@全体成员：好的，我有什么遗漏吗？楼主说表格“太宽了，导致浏览器出现水平滚动条”，有三个回答是“使用100%的宽度”。如果表格已经太宽了，这并不会有任何区别。这在CSS中不起作用（http://jsbin.com/emivi4），也不适用于“width”属性（http://jsbin.com/emivi4/2）。 - T.J. Crowder

@T J Crowder; 水平横条可能是因为绝对宽度比浏览器宽度要宽; 将其设置为100%将确保其与浏览器具有相同的宽度。对所有答案进行负投票并不适用于“我错过了什么吗？” - BeemerGuy

@TJ，他可能给了比屏幕宽度更宽的额外宽度，这会显示水平滚动条...如果你为表格提供2000像素的宽度，在1000像素的监视器上，我们可能会看到水平滚动条。 - kobe

@BeemerGuy：你有没有看过那些展示它不起作用的例子？如果它能工作，请举个例子，我以前也犯过错。我不认为我在这件事上是错的，但是当你认为自己不会错时，往往最容易受到现实的打击。 :-) - T.J. Crowder

@gov：A）不要假设如果有人评论并且有人投票反对，他们是同一个人（在这种情况下你是正确的，但通常会错）。B）不，它不起作用（再次，你甚至没有检查我提供的链接吗？）。如果你认为它有效，请展示给我看，我以前也犯过错误。 - T.J. Crowder

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;
    }
}

足够充分。

- Avatar

---

td { overflow: hidden; text-overflow: ellipsis; } 可以翻译为“td { 溢出部分隐藏，文本溢出显示省略号; } ”。 - daviestar

返回翻译后的文本：+ td { word-wrap: break-word; } - simo

但是我该如何保持列宽的比例？使用“fixed”会使所有列宽度相同。 - phil294

谢谢！第三个不错！那是真的专为移动设备设计的吗？ - Ice Bear

Answer 2

如果表格内容太宽（例如此示例），您只能修改内容使其能够在更窄的格式下显示。与早期的答案相反，如果内容太宽（如这个链接所示），将宽度设为100％将完全没有效果。如果可能，浏览器会尝试将表格保持在左右边距内，只有在无法实现时才会使用水平滚动条。

以下是一些可以使表格变窄的方法：

- 减少列数（可能需要将一个大型表拆分为多个独立的表）。 - 如果在任何内容上使用了CSS white-space: nowrap（或旧的nowrap属性， ，nobr元素等），请尝试不使用它们，以便浏览器可以选择换行该内容以使宽度减小。 - 如果使用了非常宽的边距、填充、边框等，请尝试减小它们的大小（但我确定您已经想到了这一点）。

如果表格太宽，但您看不到合适的原因（内容并不那么宽等），则您需要提供有关如何样式化表格、周围元素等的更多信息。同样，默认情况下，浏览器会避免使用滚动条。

- T.J. Crowder

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 设为零，就像我在 body 中展示的那样，然后你就可以开始了。

- Starx

---

对不起T.J.，我认为你很有胆量说jQuery不等于JavaScript。你是否知道jQuery是“JavaScript库”？此外，我已经非常清楚地表明，“IF脚本没问题”。 - Starx

@Starx: 你误读了我的评论。我的观点不是jQuery不使用JavaScript，而是假设任何进行Web开发的人都自动使用jQuery并不是一个有效的假设。许多人不使用它，他们要么不使用库，要么使用Prototype、YUI、Closure或其他几个库。毫无疑问，jQuery是一个很棒的JavaScript库；但在与HTML/CSS有关的问题中介绍它（或脚本）是没有用的。 - T.J. Crowder

@T.J. Crowder 你找到任何使用HTML或CSS的解决方案了吗？如果没有，那么唯一的方法就是使用JavaScript！ - alexia

@Nyuszika7H，实际上我已经发布了一个代码片段，可能可以作为解决方案...但这取决于其他嵌套元素是否在其后出现，是否需要将表格宽度设置为100％，但这只是正确使用边距和填充的问题。 - Starx

@lopezdp，只要在script标签内部，无论是在head还是在body中，都可以被读取。 - Starx

Answer 4

不应该使用百分比单位作为另一个元素的宽度/高度，而应该使用vh和vw。
你的代码应该是：

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

但是，如果文档大小小于100vh或100vw，那么您需要将尺寸设置为文档的大小。

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

- anova01

Answer 5

使用基于视口宽度的单位来设置font-size，例如：

table { font-size: 0.9vw; }

当页面太窄时，这将使字体无法阅读，但有时这是可以接受的。

- Sergey M

Answer 6

将表格放在一个包含元素中。

overflow: scroll;
max-width: 95vw;

或者让表格适应屏幕并overflow: scroll所有单元格。

- KHAYRI R.R. WOULFE

Answer 7

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

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

提供信息，如果您的表格有太多列而无法减少，请将字体大小调小。这样可以消除水平滚动条。有两个好处：您的移动网页样式将保持不变（没有水平滚动条很好），当用户看到小尺寸时，大多数用户会将表格放大到自己舒适的级别。

- gourav bajaj

Answer 8

你需要在表格样式中添加：width: auto;

- Shlomo

---

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步详细内容，例如引用或文档，以便他人可以确认你的回答是否正确。你可以在帮助中心找到关于如何编写良好回答的更多信息。 - Community