Geek asks and answers

How can I make fluid width, fluid height, fixed table header using jQuery?

I am working on a table of HTML / CSS headers, liquid height, fixed header without success. I hope you can point me to a javascript or jQuery solution.

Criteria:

  • the table should fill the entire width of the browser window (at least the container)
  • the table should fill the entire height of the available container in the browser window.
  • tbody should scroll y if there is not enough space for all lines
  • the the th and tbody td columns should line up

Pure HTML / CSS is a bust. What about jQuery or javascript?

Here's the script: http://jsfiddle.net/JXWfC/6/

Ultimately, he will need to work with IE7 + and modern versions of Chrome and FireFox.

Here is some layout of my main page:

<div class="container">
    <div class="sidebar">
        nav here
    </div>
    <div class="content">
        <table>
            <thead>
                <tr><th>column 1</th><th>2</th><th>three</th><th>this is column four</th></tr>
            </thead>
            <tbody>
                <tr><td>data</td><td>can</td><td>have</td><td>different widths: not all the same</td></tr>
                <tr><td>table</td><td>-</td><td>should</td><td>fill 100% width and 100% height</td></tr>
                <tr><td>and</td><td>-</td><td>should</td><td>not require all td to be same width</td></tr>
                <tr><td>but</td><td>-</td><td>percentage</td><td>% widths are just fine</td></tr>
                <tr><td>and</td><td>if</td><td>there's</td><td>too many rows, it should scroll y (overflow-y: scroll)</td></tr>
                <tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr>
                <tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr>
                <tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr>
                <tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr>
            </tbody>
        </table>
    </div>
</div>
+5
source share
2 answers

This is not complete and has not been verified by anything other than Chrome, but hopefully it will get you back on track.

Basically the approach is to make the container position:relative;and tags theverything position:absolute;. This requires quite a bit of additional code for proper positioning, but this is a decent way to make the header always stay and scroll through the table cells.

Alternatively, you can make the headers a separate div from the table, but you still need to set the width so that the columns line up. This is actually a horse.

http://jsfiddle.net/daCrosby/JXWfC/9/

<div id="hold">
    <div class="header">
        <h4>title goes here</h4>
    </div>
    <div class="container">
        <div class="sidebar">sidebar<br />nav<br />goes<br />here</div>
        <div class="content" >
            <table>
                <thead>
                    <tr>
                        <th class="col1">column 1</th>
                        <th class="col2">2</th>
                        <th class="col3">three</th>
                        <th class="col4">this is column four</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="col1">data</td>
                        <td class="col2">can</td>
                        <td class="col3">have</td>
                        <td class="col4">different widths: not all the same</td>
                    </tr>
                [ ... ]

CSS

body{
    background:#000;
}
div {
    display:inline-block;
    vertical-align:top;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#hold{
    display:block;
    padding:40px 10px;
    width:95%;
    margin:auto;
}
.content table,
.header,
.container{
    width:100%;
    max-height:100%;
}
.header {
    background:darkgray;
    color:white;
    text-align:center;
}
.container {
    background:lightgray;
}
.sidebar {
    width:20%;
    background:green;
    color:white;
    float:left;
}
.content {
    width:80%;
    position:relative;
}
h4 {
    margin:0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    background:red;
    overflow-y:scroll;
    height:300px;
    display:block;
}
thead {
    position:absolute;
    top:1px;
    left:0px;
    right:0px;
}
tbody{
    padding:1.3em 0px 0px;
    margin:0px;
    display:block;
}
tr{
    width:100%;
    display:block;
    margin-top:-2px;
}
th {
    background:#666;
    color:#fff;
    position:absolute;
}
td {
    display:inline-block;
    margin:0px;
    padding:0px;
    background:#ddd;
}
td.col2,
td.col3,
td.col4{
    margin-left:-4px;
}
.col1 { width:20%; }
.col2 { width:10%; }
.col3 { width:20%; }
.col4 { width:50%; }
th.col1 { left:0px; right:80%; }
th.col2 { left:20%; right:70%; }
th.col3 { left:30%; right:50%; }
th.col4 { left:50%; right:0x; }
+2
source

Do you want this? Working example

<div class="container" style="overflow:scroll;">
    <div class="sidebar">nav here</div>
    <div class="content">
        <table>
            <thead>
                <tr>
                    <th width=25%>column 1</th>
                    <th width=25%>2</th>
                    <th width=25%>three</th>
                    <th width=25%>this is column four</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>data</td>
                    <td>can</td>
                    <td>have</td>
                    <td>different widths: not all the same</td>
                </tr>
                <tr>
                    <td>table</td>
                    <td>-</td>
                    <td>should</td>
                    <td>fill 100% width and 100% height</td>
                </tr>
                <tr>
                    <td>and</td>
                    <td>-</td>
                    <td>should</td>
                    <td>not require all td to be same width</td>
                </tr>
                <tr>
                    <td>but</td>
                    <td>-</td>
                    <td>percentage</td>
                    <td>% widths are just fine</td>
                </tr>
                <tr>
                    <td>and</td>
                    <td>if</td>
                    <td>there's</td>
                    <td>too many rows, it should scroll y (overflow-y: scroll)</td>
                </tr>
                <tr>
                    <td>sample</td>
                    <td>1</td>
                    <td>row</td>
                    <td>Lorem ipsum dolor sit amit.</td>
                </tr>
                <tr>
                    <td>sample</td>
                    <td>1</td>
                    <td>row</td>
                    <td>Lorem ipsum dolor sit amit.</td>
                </tr>
                <tr>
                    <td>sample</td>
                    <td>1</td>
                    <td>row</td>
                    <td>Lorem ipsum dolor sit amit.</td>
                </tr>
                <tr>
                    <td>sample</td>
                    <td>1</td>
                    <td>row</td>
                    <td>Lorem ipsum dolor sit amit.</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
0
source

More articles:


All Articles