CSS display table cell width not working

Question

I am trying to create a tabular structure with CSS, having relative widths.

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 Code before closing body tag:

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

Output:

Why is left_nav not getting 14% width of its parent, bottom_wrapper?

in table structure td width will be the maximum width of td in column . that's why your not getting the 14% width — yugi
– yugi, Commented Sep 14, 2014 at 6:23

Community · Accepted Answer · 2017-05-23 12:01:03Z

1

The key thing to remember about using display:table-cell is that it causes your div to behave like a td element. In your case, control_panel is assigned a width of 100%, causing the cell directly underneath it i.e. left_nav, to be stretched.

If I am not mistaken, you are trying to do colspan on your control_panel, right? Unfortunately, that is one of the limitation of display:table.

A workaround is to separate out your control_panel_wrapper and your bottom_wrapper into separate dtable. Take a look at this fiddle for live demo. (You can remove the border:1px solid gray; from dcell if you don't like the border.)

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Sep 14, 2014 at 6:09

ivan.sim

9,3668 gold badges51 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SLePort · Accepted Answer · 2016-09-06 11:56:32Z

0

Change:

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

to:

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

Set drow class display as table and run it. It's working well.

edited Sep 6, 2016 at 11:56

SLePort

15.5k3 gold badges40 silver badges45 bronze badges

answered Sep 6, 2016 at 11:34

PradeepJangid

151 bronze badge

Collectives™ on Stack Overflow

CSS display table cell width not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related