26 
<!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>

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

4

8 回答 8

22

问题是，表格中的内容需要的空间超过了 100% 的窗口大小。

你可以做的是使用 CSS 的溢出属性。尝试以下示例并选择，这是否适合您：

<!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>

溢出属性有 4 个选项可用：可见、隐藏、滚动和自动。上面的例子说明了滚动选项，它为表格本身添加了一个滚动条。

于 2013-11-06T10:04:11.997 回答
20

如果表格内容太宽（如您的示例中），您无能为力，除了更改内容以使浏览器可以以更窄的格式显示它。如果内容太宽，设置width:100%;将不起作用。浏览器只会求助于显示水平滚动条。

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

  • 减少列数
  • 在任何内容上使用CSS white-space: nowrap，因此浏览器可以选择包装该内容以保持宽度减小。
  • 减少您拥有的任何边距、边框、填充
  • 减小字体大小
  • 使用word-wrap:break-word或word-break: break-all;
  • 溢出不适合屏幕宽度的内容overflow: scroll;（您的选项是可见、隐藏、滚动和自动）

如果可以，浏览器会避开滚动条，但如果内容不能适应页面宽度，则不会。

于 2013-11-06T09:59:00.587 回答
5

这个令人惊讶的简单解决方案为我解决了问题。

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

在这里预览：https ://jsfiddle.net/3m2Lw7d4/

注意：overflow-wrap替换了官方 CSS3 中的 word-wrap。

于 2020-07-17T16:05:55.663 回答
4

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

table {
table-layout: fixed;
}

table tr td {
max-width: 100%;
overflow-x: auto;
}
<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>

于 2021-01-12T10:19:58.247 回答
2

您可以将一个元素放入单元格中 - 这就是我所做的。

<table>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
</table>
于 2017-11-23T10:18:58.563 回答
1

其实<table border="1" width="100%">错误。

你应该做的<table border="1" width="100">

其他一切都必须正确

于 2020-11-09T12:34:20.170 回答
0

对于引导程序，将带有类的表元素包装在带有类.table的包装器中。试试这个代码。在这里复制表格<div>.table-responsive

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
于 2020-07-16T11:04:03.983 回答
-5

你可以在你的桌子上放一个课，比如

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

，并从你的CSS中放

  .size{

             width : 100%;

             }

你应该把你的css的链接放在这样的之间：

<link href="css/YOUR_CSS.css" rel="stylesheet" type="text/css" media="all" />
于 2013-11-06T09:56:40.223 回答