Question

我正在尝试使用CSS创建一个具有相对宽度的表格结构。

CSS：

.dtable { display: table; width:100%; }    
.drow { display: table-row; width:100%; }    
.dcell { display: table-cell; }
#control_panel { width:100%; }
#left_nav { width:14%;  padding: 1%; }    
#chart_container {  width:84%; padding:1%; }

HTML：

<div id='main_wrapper' class='dtable'>
    <div id='control_panel_wrapper' class='drow'>
        <div id='control_panel' class='dcell'>
        </div>
    </div>
    <div id='bottom_wrapper' class='drow'>
        <div id='left_nav' class='dcell'>&nbsp;</div>
        <div id='chart_container' class='dcell'>&nbsp;</div>
    </div>
</div>

关闭正文标记之前的Javascript代码：

<script>
$(document).ready(function() {
    console.log($(window).width());
    console.log($("#bottom_wrapper").width());
    console.log($("#left_nav").width());
    console.log($("#chart_container").width());
});
</script>

输出：

为什么left_nav没有达到其父级底部宽度的14％？

Answer 1

使用display:table-cell时要记住的关键是，它会使div的行为像td元素。在您的情况下，control_panel的宽度为100％，导致其下方的单元格left_nav被拉伸。

如果我没记错的话，您正试图在colspan上control_panel，对吗？不幸的是，那是one of the limitation of display:table。

解决方法是将您的control_panel_wrapper和bottom_wrapper分隔为单独的dtable。看一下这个fiddle的现场演示。（如果您不喜欢边框，可以从border:1px solid gray;移除dcell。）

Answer 2

变化：

.dtable { display: table; width:100%; }    
.drow { display: table; width:100%; }

为：

.dtable { width:100%; }    
.drow {display:table;width:100%;}

将卓尔类显示设置为表并运行它。它运作良好。

CSS显示表格单元格宽度不起作用

2 个答案: