HTML Table Freeze Column breaks layout

Question

I've been trying to get the layout in the following link to work correctly: http://jsfiddle.net/Tc5Xk/

Can someone help with this ?

div.dashboardBox {
 border: 1px solid #999999;
 width: 45%;
 margin-right: 20px;
 margin-bottom: 20px;
 float: left;
}
div.dashboardBoxBody {
 padding: 8px;
 height: 200px;
 overflow: auto;
 margin-left : 5em;    
}
table.standardTable {
  position: static;
  width: 95%;    
}
.standardTable th {
 font-size: 11px;
 background-color: #888888;
 color: #FFFFFF;
 font-weight: bold;
 text-align: left;
 border: 1px solid #AAAAAA;
}
#header_detail {
  text-align: left;
  position:absolute;    
  left : 0;    
}
<div class="dashboardBox">
<div class="dashboardBoxBody">
    <table style="width:200%" class="standardTable">
        <tr>
            <th id="header_detail">Location</th>
            <th id="header">Jan-13</th>
            <th id="header">Feb-13</th>
            <th id="header">Mar-13</th>
            <th id="header">Apr-13</th>
            <th id="header">May-13</th>
            <th id="header">Jun-13</th>
            <th id="header">Jul-13</th>
            <th id="header">Aug-13</th>
            <th id="header">Sep-13</th>
            <th id="header">Oct-13</th>
            <th id="header">Nov-13</th>
            <th id="header">Dec-13</th>
        </tr>
        <tr>
            <td id="header_detail">Australia</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">California</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Hyderabad</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Los Angeles</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Colorado</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Denver</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Nevada</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Stockholm</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Switzerland</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Brussels</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Paris</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Calicut</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Leh</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Denmark</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Constaninople</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Istanbul</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
        <tr>
            <td id="header_detail">Las Vegas</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
            <td id="detail">80.5%</td>
        </tr>
    </table>
</div>

Do you mean something like this? http://jsfiddle.net/Jag96/gPRqa/ — Joe_G, Aug 21 '13 at 14:18
@Joe_G : The left column needs to stay when horizontally scrolled. — Ravi, Aug 21 '13 at 14:20
Read these, it might help: http://stackoverflow.com/questions/11815882/make-first-column-fixed-and-next-column-scrollable-in-html-table, http://stackoverflow.com/questions/3402295/html-table-with-horizontal-scrolling-first-column-fixed, http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body/17557830#17557830 — Joe_G, Aug 21 '13 at 14:32

score 0 · Answer 1 · answered Aug 21 '13 at 14:19

0

Problem is in this line

#header_detail {
    text-align: left;
    position:absolute;  // This line   
    left : 0;    
}

If you take out position: absolute; you will get all city's in your area.

JsFiddle

answered Aug 21 '13 at 14:19

Arturs

1,258
5
21
28

Doing so will not freeze the first column – Ravi Aug 21 '13 at 14:24
I found similer situation. Here is code with e.x. You should take idea from here. http://jsfiddle.net/sgcer/ – Arturs Aug 21 '13 at 14:37
You can see from the link you've sent that the last row before scrolling in the left column does not have a matching one on the right side. – Ravi Aug 21 '13 at 14:53
1

You just need to manage both divs heights, to get match in both sides. Like this. http://jsfiddle.net/sgcer/438/ – Arturs Aug 22 '13 at 06:18

score 0 · Answer 2 · answered Aug 21 '13 at 14:21

0

div.dashboardBoxBody {
 padding: 8px;
 height: 200px;
 overflow: auto;
 // margin-left : 5em;    
}

#header_detail {
  text-align: left;
  // position:absolute;   
  left : 0;    
}

You need to remove the position absolute AND the margin-left of your div to get the same result without the overflow.

answered Aug 21 '13 at 14:21

Clément Malet

5,062
3
29
48

Doing so will not freeze the first column – Ravi Aug 21 '13 at 14:23
Oh, ok. I didn't get it, quite a weird request. :) Just give a few more information on what you're looking for next time. – Clément Malet Aug 21 '13 at 14:25
The first column comes out of the table in the link I've provided. You can see that if you scroll left, the first column stays intact. So, my question clearly states that while I'm trying to freeze or fix one column, it breaks the table layout. – Ravi Aug 21 '13 at 14:31
I thought the problem was about things being messed up at the bottom. I guess you'll need at least two tables to do something. – Clément Malet Aug 21 '13 at 14:36

HTML Table Freeze Column breaks layout

2 Answers2