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

足够了

如果表 * 内容 * 太宽（就像在this example中一样），除了改变内容以使浏览器能够以更窄的格式显示它之外，你什么也做不了。与前面的答案相反，如果内容太宽，将宽度设置为100%绝对没有效果浏览器已经尝试尽可能地将表格保持在左右页边距内，如果做不到这一点，就只能求助于水平滚动条。
您可以通过以下方式更改内容以使表格更窄：

• 减少列的数量（可能将一个巨石表分解为多个独立的表）。
• 如果您在任何内容上使用CSS white-space: nowrap（或旧的nowrap属性， ，nobr元素等），请查看您是否可以没有它们，以便浏览器可以选择 Package 该内容以保持宽度。
• 如果你使用了很宽的边距、填充、边框等，试着减小它们的大小（但我相信你已经想到了）。

如果表格太宽，但你没有看到一个很好的理由（内容不是那么宽，等等），你必须提供更多的信息，你是如何设置表格的样式，周围的元素，等等，同样，默认情况下，浏览器将避免滚动条，如果它可以。

table { width: 100%; }

不会产生你所期望的确切结果，因为所有的边距和填充都用在了body中。所以如果脚本是OK的，那么就使用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，就像我在正文中所展示的那样，然后就设置好了。

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

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

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

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

以与视口宽度相关的单位设置font-size，例如：
table { font-size: 0.9vw; }
当页面太窄时，这将使字体无法读取，但有时这是可以接受的。

将表放在一个容器元素中，该元素具有

overflow: scroll;
max-width: 95vw;

或使表格适合屏幕并overflow: scroll所有表格单元格。

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

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

对于您的信息，如果您的表有太多的列，你不能减少，然后使字体大小小。它将摆脱水平滚动。有两个优点：你的移动的网页风格将保持不变（没有水平滚动），当用户看到小尺寸时，大多数用户会放大到他们的舒适水平。

您需要添加表格的样式：width: auto;