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

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

如果表格内容太宽(如本例所示),除了改变内容以使浏览器能够以更窄的格式显示内容之外,您无能为力.与之前的答案相反,如果内容太宽(如该链接,这个,演示),将宽度设置为100%将完全没有效果.如果可以的话,浏览器已经尝试将表保持在左右边距内,如果不能,则只采用水平滚动条.

您可以通过某些方式更改内容以使表格更窄:

• 减少列数(可能将一个巨型表分成多个独立的表).
• 如果您使用CSS white-space: nowrap上的任何内容(或旧的nowrap属性 ,一个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正如我在身体上显示的那样,你就定了.