CODEWITHSUNDEEP
jquerycssresizehtml-table
Japeljoff
Japeljoff

Reputation: 21

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.

Upvotes: 0

Views: 2447

Answers (2)

Poornima
Poornima

Reputation: 928

min-width on topRightContainer and topTable are not enough to hold the contents of the table. Since the contents occupy more space, the table is moving to the next line when the window is resized over a certain width. I can think of these options:

  1. word-break:break-all on #topTable which would break the words on resizing the window beyond the size of the contents, but it would add height since the text would wrap to a new line. Its not the optimal solution since the words break and wrap up into next line making it less meaningful to read.
  2. Set white-space:nowrap on table and increase the minimum width setting on topTable and topRightContainer to fit the contents. Scrollbar will automatically appear on resizing the window and you can scroll to the contents.
  3. Reduce the font-size of the contents on resizing the window to fit the table within the DIV.

Upvotes: 0

isherwood
isherwood

Reputation: 61143

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.

Upvotes: 1

Related Questions