html - 如何使表格扩展到整个页面

Question

我有一个带有侧边栏的 2 列布局和一个包含表格的主 div。

侧边栏有一个固定的宽度，而主 div 应该有一个灵活的宽度，所以它总是会延伸到屏幕的末端。有没有 CSS 方法可以做到这一点，还是我需要使用 JavaScript？

HTML

<div id="content" data-role="content" role="main">
    <section>       
        ....
    </section>
    <div id="gridContainer">
        <table border="0" id="tblBrvGrid" class = "background" data-sort = "Name" data-asc_desc = "asc" data-filter = "">               
        <thead>
            <tr>
                <th></th>
                <th class="service sortable" data-field="Name" I18N="COLUMN_HEADER_SERVICE">
                    <span class="sort-asc"></span>
                </th>
                <th I18N="COLUMN_HEADER_STATUS"></th>
                <th I18N="COLUMN_HEADER_PERFORMANCE"></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            ....
        </tbody>
    </table>
    <a id ="gridPaging" class="more-data-active" I18N="MORE_DATA" data-role="button" data-theme="g"></a>
    </div>
    <!-- end #gridContainer -->
</div>
<!-- end #content -->

CSS

section {
  float: left;
  width: 255px;
  border-right: 1px solid #DDDDDD;
}

#gridContainer {
  float: left;
  padding-left: 10px;
  min-width: 70%;
}

table {
  color: #222;
  width: 100%;
}

这是一个更精致的小提琴：http: //jsfiddle.net/RmQR6/

Answer 1

如果我理解正确，那可能就是您想要的http://jsfiddle.net/RmQR6/1/ 。像这样写：

#gridContainer {
  padding-left: 10px;
  overflow:hidden;
}