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

How can I make a CSS table fit the screen width?

提问by David B

Currently the table is too wide and causes the browser to add a horizontal scroll bar.

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

采纳答案by T.J. Crowder

If the table contentis too wide (as in this example), there's nothing you can do other than alter the content to make it possible for the browser to show it in a more narrow format. Contrary to the earlier answers, setting width to 100% will have absolutely no effect if the content is too wide (as that link, and this one, demonstrate). Browsers already try to keep tables within the left and right margins if they can, and only resort to a horizontal scrollbar if they can't.

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

Some ways you can alter content to make a table more narrow:

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

• Reduce the number of columns (perhaps breaking one megalithic table into multiple independent tables).
• If you're using CSS white-space: nowrapon any of the content (or the old nowrapattribute,  , a nobrelement, etc.), see if you can live without them so the browser has the option of wrapping that content to keep the width down.
• If you're using really wide margins, padding, borders, etc., try reducing their size (but I'm sure you thought of that).

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

If the table is too wide but you don't see a good reason for it (the content isn't that wide, etc.), you'll have to provide more information about how you're styling the table, the surrounding elements, etc. Again, by default the browser will avoid the scrollbar if it can.

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

回答by Kai Noack

CSS:

CSS：

table { 
    table-layout:fixed;
}

Update with CSS from the comments:

从评论中使用 CSS 更新：

td { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word;
}

For mobile phones I leave the table width but assign an additional CSS class to the table to enable horizontal scrolling (table will not go over the mobile screen anymore):

对于手机，我保留表格宽度，但为表格分配了一个额外的 CSS 类以启用水平滚动（表格将不再越过移动屏幕）：

@media only screen and (max-width: 480px) {
    /* horizontal scrollbar for tables if mobile screen */
    .tablemobile {
        overflow-x: auto;
        display: block;
    }
}

Sufficient enough.

足够了。

回答by Starx

table { width: 100%; }

Will not produce the exact result you are expecting, because of all the margins and paddings used in body. So IF scripts are OKAY, then use Jquery.

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

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

If not, use this snippet

如果没有，请使用此代码段

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

You will notice that the width is perfectly covering the page.

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

The main thing is too nullify the marginand paddingas I have shown at the body, then you are set.

主要是太无效了margin，padding正如我在正文中所展示的那样，然后你就设置好了。

回答by Sergey M

Set font-sizein viewport-width-related units, e.g.:

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

table { font-size: 0.9vw; }

table { font-size: 0.9vw; }

This will make font unreadable when page is too narrow, but sometimes this is acceptable.

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

回答by Khayri R.R. Woulfe

Put the table in a container element that has

将表格放在一个容器元素中

overflow:scroll; max-width:95vw;

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

or make the table fit to the screen and overflow:scroll all table cells.

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

回答by gourav bajaj

Already there are good solution for this question .but everyone forgot about font-size. This is last but not least solution. you can decrease your font-size by 2 or 3 px . it will still good visible to user and for somewhat you can decrease your table width. this worked for me. as my table has 5 columns 4 showing perfectly 5th went out of viewport. so i decreased font-size and all 5 columns are fitted into screen

这个问题已经有了很好的解决方案。但是每个人都忘记了字体大小。这是最后但并非最不重要的解决方案。您可以将 font-size 减小 2 或 3 px 。它仍然对用户可见，并且在某种程度上您可以减少表格宽度。这对我有用。因为我的表有 5 列 4，完美地显示了第 5 列超出了视口。所以我减小了字体大小，所有 5 列都适合屏幕

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

FYI,if your tables has too many columns but you can't decrease then make font size small is better then horizontal scroll. there are two advantages. your style for mobile web will remain same (good without horizontal scroll) and when user see small size most of user zoom-in the table to there comfort level.

仅供参考，如果您的表格有太多列但您无法减少，那么缩小字体大小比水平滚动更好。有两个优点。您的移动网络风格将保持不变（无需水平滚动即可），并且当用户看到小尺寸时，大多数用户会将表格放大到舒适程度。

回答by True Soft

How about:

怎么样：

table { 
   width: 100%; 
}

Maybe you have some images that are too big and that causes the table to be wider.

也许您有一些图像太大而导致表格变宽。

Also, check how your table looks in other browsers.

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