HTML表格宽度不起作用

Question

HTML表格宽度不起作用

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <table border="1" width="100%">

        <tr>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        </tr>


    </table>




</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我试图将表格宽度设置为上表的100%,但它没有超出窗口宽度的影响.如何更改表格的宽度,使其与窗口大小相同.

Answer 1

Don*_*Dee 19

问题是,表格内的内容需要的空间超过100%的窗口大小.

你能做的是使用CSS的overflow-property.尝试以下示例并选择,这是一个选项:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
    .table {
        color: green;
        display: block;
        max-width: 100%;
        overflow: scroll; <!-- Available options: visible, hidden, scroll, auto -->
    }
</style>
</head>
<body>

<table border="1" class="table">

    <tr>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>


</table>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

overflow-property有4个选项:可见,隐藏,滚动和自动.上面的例子说明了scroll-option,它为表本身添加了一个滚动条.

Answer 2

tom*_*989 15

如果表格内容太宽(如在您的示例中),您无法做任何事情,除了更改内容以使浏览器能够以更窄的格式显示它.width:100%;如果内容太宽,设置将不起作用.浏览器只会显示一个水平滚动条.

您可以通过以下方式缩小内容范围:

减少列数
使用CSS white-space: nowrap任何内容,因此浏览器可以选择包装该内容以保持宽度.
减少您拥有的任何边距,边框和填充
减小字体大小
使用word-wrap:break-word或word-break: break-all;
覆盖不适合屏幕宽度的内容overflow: scroll;(您的选项可见,隐藏,滚动和自动)

如果可以,浏览器将避开滚动条,但如果内容不能适合页面的宽度,则不会.

Answer 3

小智 10

只需要应用表格布局：固定

table {
table-layout: fixed;
}

table tr td {
max-width: 100%;
overflow-x: auto;
}

Run Code Online (Sandbox Code Playgroud)

<table border="1" width="100%">
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
  </tr>
</table>

Run Code Online (Sandbox Code Playgroud)

Answer 4

hum*_*ads 8

这个出奇简单的解决方案对我来说很有效。

table { width: 100%; }
table td, table th { overflow-wrap: anywhere; }

Run Code Online (Sandbox Code Playgroud)

此处预览： https: //jsfiddle.net/3m2Lw7d4/

注意：overflow-wrap取代了官方 CSS3 中的word-wrap 。

归档时间：	11 年，10 月前
查看次数：	56081 次
最近记录：	7 年，9 月前