我正在尝试使用 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'> </div>
<div id='chart_container' class='dcell'> </div>
</div>
</div>
关闭 body 标签前的 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>
输出:
1356
1340
1282.2
3.2
为什么 left_nav 的宽度不是其父级 bottom_wrapper 的 14%？
最佳答案
使用 display:table-cell 时要记住的关键是它会使您的 div 表现得像 td 元素。在您的情况下，control_panel 被分配了 100% 的宽度，导致其正下方的单元格(即 left_nav)被拉伸(stretch)。
如果我没记错的话，你正试图在你的 control_panel 上执行 colspan，对吗？不幸的是，那是one of the limitation of display:table .
解决方法是将您的 control_panel_wrapper 和 bottom_wrapper 分离到单独的 dtable 中。看看这个fiddle现场演示。 (如果您不喜欢边框，可以从 dcell 中删除 border:1px solid gray;。)
关于jquery - CSS显示表格单元格宽度不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25830401/