如何将表格的宽度设置为窗口的宽度答案

【问题标题】：How to set the table´s width to the window´s width如何将表格的宽度设置为窗口的宽度
【发布时间】：2014-05-29 09:15:45
【问题描述】：

我希望表格的宽度与窗口相同，如果它太宽，我希望能够滚动表格。今天表格变得比窗口更宽，您必须使用窗口上的滚动条而不是包含表格的 div 上的滚动条。

（我注意到如果我删除第一个表格效果很好，但我不能删除它，因为我的 html 代码将插入到具有此表格标签的页面中。）

<table style="width:100%;">
<tr>
    <td>
        <div style="width:100%;overflow:scroll;">
            <table style="width:100%;overflow:hidden;">
                <tr>
                    <td>
                        <div style="width:900px;">Kolumn123</div>
                    </td>
                    <td>
                        <div style="width:900px;">Kolumn123</div>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>

这是JSFiddle demo

【问题讨论】：

看看这里stackoverflow.com/a/6850319/3383479
尝试删除您的特定宽度style="width:900px;"。您添加该特定宽度的目的是什么？
最好用CSS创建类而不是直接把你的宽度放在属性中
感谢您的重播！我必须让列具有特定的宽度，因此无法删除 width 属性。
感谢 Inanikian！我会看看那个链接。（在我的代码中，我有 css 类，但在这里使用内联样式更容易显示。）

标签： html css html-table width scrollbar

【解决方案1】：

需要确定div的宽度小于其内表。因为这里它被设置为 100% 并且所有内容都将自下而上计算，使滚动条出现在最外面的容器中。如果您无法更改第一个表格，请尝试使用 javascript 获取窗口大小并将其设置为 div。

【讨论】：

感谢您的重播！我想尝试在没有 javascript 的情况下执行此操作，但也许这是不可能的。当我删除外部表时它工作正常，所以我真的希望有一种方法可以使它与那个表标签一起工作。

【解决方案2】：

试试这个——

<div style="overflow: scroll;">
<table>
    <tbody>
      <tr>
        <td>
            <div style="width:100%;">
                <table style="width:100%;overflow:hidden;">
                    <tbody><tr>
                        <td>
                            <div style="width:900px;">Kolumn123</div>
                        </td>
                        <td>
                            <div style="width:900px;">Kolumn123</div>
                        </td>
                    </tr>
                </tbody></table>
            </div>
        </td>
    </tr>
  </tbody>
 </table>
</div>

【讨论】：

感谢您的重播！这很好用，但在我的情况下，我只能从第一个 div 标签更改 html。这是因为我的 html 被插入到一个已经存在的 html 页面中。