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

我想要一个表格来获得与窗口相同的宽度，如果它的宽度很宽，我希望能够滚动表格。今天，表格变得更宽，然后你必须使用窗口上的滚动条而不是包含表格的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

来源

2014-04-15 user1297771

看看这里http://stackoverflow.com/a/6850319/3383479 –

尝试删除您的具体宽度'风格= “WIDTH：900px;”'。添加该特定宽度的目的是什么？ – JunM

最好用'CSS'创建类，而不是直接在属性中放置宽度 –

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

来源

2014-04-15 07:06:43 thethanghn

感谢您的回复！我想尝试在没有javascript的情况下做到这一点，但也许这是不可能的。当我删除外表时，它工作正常，所以我真的希望有一种方法可以使它与表标记一起工作。 – user1297771

尝试this--

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

来源

2014-04-15 07:27:02 shashank

感谢您的回复！这工作正常，但在我的情况下，我只能从第一个div标签更改html。这是因为我的html插入到已经存在的html页面中。 – user1297771

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

回答

相关问题