Japeljoff Japeljoff - 13 days ago 5
CSS Question

Dynamic Resizing Table inside fixed DIV

I have a table inside a fixed header and I would like it to be dynamically re-size when the window is being re-sized.

The DIV that contains the table (topTable in the code) works perfectly when you re-size the window, but the table doesn't re-size properly, it does to a certain point but after X-width the whole table moves down!.

Any idea how to:


  1. Make the table width the same as its parent container?

  2. More important, how to re-size the table properly when window resize?.



What I had tried:


  1. I had tried to setup the width of the table = parent's container:
    $('#topTable').height($('#topRightContainer').height());

  2. When I create the resizeDic() function, I put the table ID in there:
    $("# (...), #topTable").width(widthA);



My code is a lit bit long, here's a JFiddle File : http://jsfiddle.net/japeljoff/SnPC5/1/

HTML :

<body>
<div id="container">
<div id="topContainer">
<div id="topLeftContainer"></div>
<div id="topRightContainer">
<table id="topTable" border="1">
<tr>
<th colspan="">Practice</th>
<th colspan="">Leadership</th>
</tr>
<tr>
<th colspan="">Learning</th>
<th colspan="">Something1</th>
<th colspan="">Something2</th>
<th colspan="">Managing</th>
<th colspan="">Leading</th>
</tr>
<tr>
<th colspan="">Intern Arc</th>
<th colspan="">Arc 1</th>
<th colspan="">Arc 2</th>
<th colspan="">Associate</th>
<th colspan="">Senior Associate</th>
<th colspan="">Partner</th>
</tr>
</table>
</div>
</div>
<div id="bottomContainer">
<div id="bottomLeftContainer">
</div>
<div id="bottomRightContainer">
<!--<div id="bottomRight-LeftContainer"></div>
<div id="bottomRight-RightContainer"></div>-->
</div>
</div>
</div>
</body>


Jquery:

var containerWidth = $("#container").width();
/*- Set up the width in BottomContainer & TopContainer according to Container's width-*/
$('#topContainer').width(containerWidth);
$('#bottomContainer').width(containerWidth);

/*- Set up the Margin Top on the BottomContainer to be just below the fixed header-*/
$('#bottomContainer').css('margin-top', ($('#topContainer').height() + 1));

/*- Distribute width space: 15% for LeftContainer & 85% for Rigth Container-*/
$('#topLeftContainer').width(containerWidth * 0.15 );
$('#topRightContainer').width(containerWidth * 0.85 );
/*- Distribute width space: 15% for LeftContainer & 85% for Rigth Container-*/
$('#bottomLeftContainer').width(containerWidth* 0.15);
$('#bottomRightContainer').width(containerWidth* 0.85);

$('#topTable').height($('#topRightContainer').height());



function resizeDiv() {
var widthA = $(window).width() - 30;
if(widthA >= 500){

$("#bottomContainer, #topContainer, #topRightContainer, #bottomRightContainer").width(widthA);

}
}

$(window).resize(function() {
resizeDiv()
});

$(window).load(function() {
resizeDiv()
});


CSS:

#container {
width:800px;
height:100%;
/*background-color:red;*/
position:relative;padding-right:50px;

}

#topContainer{
background-color:yellow;
height:100px;
border:1px black solid;
border-collapse:collapse;
position:fixed;
top:0;
min-width:80px;
width:1px;
}

#bottomContainer{

background-color:grey;
height:300px;
width:1px;
border:1px black solid;
border-collapse:collapse;
min-width:100px;

}
#extra{background-color:green;height:10px;
border:1px red solid;
border-collapse:collapse;}

#topLeftContainer {
background-color:#222222;
height:100%;
float:left;
}

#topRightContainer {
background-color:#99281A;
height:100%;
min-width:80px!important;
}

#topTable{
background-color:white;
min-width:80px!important;
border-collapse:collapse;

}


If you need more info, or be more clear, please let me know.

Answer

I think you're trying way too hard. Tables can easily be fluid without all that JavaScript, as yours is here:

http://jsfiddle.net/isherwood/SnPC5/2/

What I've done is to remove #topLeftContainer, which seems to serve no purpose, and set the table's width to 100%. A little more styling would get the black box back that was #topLeftContainer.

#topTable {
    width: 100%;
}

<div id="container">
    <div id="topContainer">
        <div id="topRightContainer">
            <table id="topTable" border="1">
                ...

With some responsive CSS through media queries you'd be able to get the table flowing down to a smaller width.