Jquery CSS显示表格单元格宽度不工作

我试图用CSS创建一个具有相对宽度的表格结构

CSS:

HTML:

---

为什么

left\u nav

没有获得其父级底部包装的14%宽度？

使用

display:table cell

的关键是它会使

div

的行为类似于

td

元素。在您的情况下，

控制面板

被指定为100%的宽度，导致其正下方的单元格（即

左侧导航

）被拉伸

如果我没有弄错的话，您正在尝试在

控制面板上执行
colspan
，对吗？不幸的是，事实并非如此

一种解决方法是将
控制面板包装器
和
底部包装器
分离为单独的
数据表
。看一下这个现场演示。（如果您不喜欢边框，可以从
dcell
中删除
边框：1px纯灰；
。
更改：

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

致：

将drow类显示设置为table并运行它。它运行良好。
在表结构中，td宽度将是列中td的最大宽度。这就是为什么你没有得到14%的宽度
<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>

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

1356
1340
1282.2
3.2

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

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