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

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

您可以通过某些方式更改内容以缩小表格范围：

减少列数（可能将一个巨型表分成多个独立的表）。
如果您在任何内容（或旧white-space: nowrap属性，nowrap， 元素等）上使用CSS nobr，请参阅你可以没有它们，所以浏览器可以选择包装内容以保持宽度不变。
如果你使用非常宽的边距，填充，边框等，请尝试减小它们的尺寸（但我确定你已经想到了这一点）。

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

Answer 3

table { width: 100%; }

由于身体中使用的所有边距和填充，不会产生您期望的确切结果。所以IF脚本是OKAY，然后使用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

怎么样：

table { 
   width: 100%; 
}

也许你有一些太大的图像，导致表格更宽。

另外，请检查您的表在其他浏览器中的外观。

Answer 6

这个问题已经有了很好的解决方案。但是每个人都忘记了字体大小。这是最后但并非最不重要的解决方案你可以将字体大小减少2或3像素。它仍然可以很好地显示给用户，有些你可以减少你的表宽度。这对我有用。因为我的桌子有5列4完全显示第5个出了视口。所以我减少了字体大小，所有5列都适合屏幕

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

仅供参考，如果你的表有太多的列，但你不能减少，那么使字体大小比水平滚动更好。有两个好处。您的移动网络风格将保持不变（良好的没有水平滚动），当用户看到小尺寸时，大多数用户放大表格到舒适度。

Answer 7

在视口宽度相关单位中设置@Retention(RetentionPolicy.RUNTIME) public @interface PredicateMeta { String name(); int data(); String operator(); } public class AnnotationTest { public static void main(String[] args) { Predicate p = getPred(); // how to get annotation values of data, name and operator?? } public static Predicate getPred() { @PredicateMeta(data = 0, name = "name", operator = "+") Predicate p = (o) -> true; return p; } }，例如：

font-size

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

Answer 8

将表放在具有

的容器元素中

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

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

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

8 个答案: