部分小于内容

Question

我在MVC剃刀中获得的默认布局页面有一个问题，即section标签小于其内容。问题是我里面有一张大桌子，它已经用完了部分，而不是简单地变得足够宽以适应它。我在jsFiddle中重新创建了这个问题。您可以看到蓝色框比红色框要薄得多。蓝色部分是窗口的初始大小，但如果向右滚动，则表示该表格比该部分宽。

如何让该部分扩大以匹配其内容的大小？

<div class="page">        
    <section id="main" style="background:blue;height:50px">
       <table style="width:1000px; overflow:auto;background:red">
           <tr><td>lkjlkjlkjlkjjhgjhgjhgjgjhgjhg</td></tr>

        </table>
    </section>
    <footer>
    </footer>
</div>

http://jsfiddle.net/sDG8n/1/

Answer 1

将部分浮动到左侧

<section id="main" style="float:left;background:blue;height:50px">

Answer 2

尝试将overflow:auto放在部分而不是表格上。

Answer 3

Spec说你做错了：

  

section元素表示通用文档或应用程序   section ... section元素不是通用容器元素。什么时候   为了造型目的或为了方便起见，需要一个元素   编写脚本时，鼓励作者使用div元素

换句话说：使用DIV。