HTML表格宽度不起作用答案

【问题标题】：HTML table width not workingHTML表格宽度不起作用
【发布时间】：2013-11-17 11:47:09
【问题描述】：

<!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%，但超出窗口宽度没有任何影响。如何更改表格的宽度，使其与窗口大小相同。

【问题讨论】：

无论如何，你不能把所有这些都放在 100% 中。那么，您期望会发生什么？如果您解释您希望达到的效果，也许我们可以帮助您实现。

标签： html css width html-table

【解决方案1】：

问题是，表格中的内容需要的空间超过了 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 个选项可用：可见、隐藏、滚动和自动。上面的例子说明了滚动选项，它为表格本身添加了一个滚动条。

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

您还可以做其他事情。更改字体大小，word-wrap:break-word 等。甚至可以将表格保持在 100%，但内容会溢出。我只是不知道 OP 希望达到哪些效果。
我也会加入 CSS 的 word-break: break-all;
如果你给出一个实际的例子而不只是使用项目符号会有所帮助。
CSS不应该是空白：正常吗？我遇到了类似的问题，其中一些表头文本用空格包裹在中：不换行。宽屏幕的漂亮标题格式，但阻止宽度：100% 用于更小。

【解决方案3】：

这个令人惊讶的简单解决方案对我有用。

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

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

注意：overflow-wrap replaces word-wrap 在官方 CSS3 中。

【讨论】：

这是最简单的方法，对我来说效果很好。

【解决方案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>

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

你应该完成<table border="1" width="100">

其他一切都必须正确

【讨论】：

【解决方案7】：

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

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

【讨论】：

【解决方案8】：

你可以在你的表中放一个类，比如

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

，然后从您的 css 中放入

  .size{

             width : 100%;

             }

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

<link href="css/YOUR_CSS.css" rel="stylesheet" type="text/css" media="all" />

【讨论】：

您应该在发布之前测试这些内容。如果您进行了测试，那么您会发现此解决方案与 OP 的问题完全相同。即使您纠正了示例中的错误。
对不起，坦率地说，但是看着你的解决方案让我头疼。谢谢。
如果你从编程开始，你会看到html和css一般是“一对”的，这意味着css类设计你的html代码是因为css代码。因此，您使用 .css 创建了一个新文件，并使用我喜欢的调用此页面
你可以随心所欲，但这里的答案应该是解决问题，而不是提供更多问题。修改后，还是有错误。就像我说的，即使没有错误它也不会工作！
什么是“编程”？