Freeze first column of a HTML table in IE7

Question

0.00/5 (No votes)

See more:

I have a html table in which i need fix or freeze the first column. I have done it using css which is worknig fine in IE9 and Chrome but it is not working as expected in IE 7. Below is my code. I need to know how i can fix the first column in IE 7. So please Suggest.

HTML :

XML

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

    <title></title>
    <link rel="stylesheet" type="text/css" href="Style1.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="HeaderDiv" runat="server"></div>

    <div style="width: 95%;  overflow-x:scroll; overflow-y:visible;position :relative; padding-bottom:1px; margin-left:5em;  height: 200px">

    <table style="width: 100%; height: auto; position:absolute" cellpadding="0" cellspacing="0" border="0">
        <tr><td class="hc">1</td><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td>7</td>
        <td >8</td><td >9</td><td >10</td><td >11</td><td >12</td><td >13</td><td>14</td>
        <td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td><td>21</td>
        <td >22</td><td >23</td><td >24</td><td >25</td><td >26</td><td >27</td><td>29</td>
        <td >30</td><td >31</td><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td>7</td>
        <td >8</td><td >9</td><td >10</td><td >11</td><td >12</td><td >13</td><td>14</td>
        <td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td><td>21</td>
        <td >22</td><td >23</td><td >24</td><td >25</td><td >26</td><td >27</td><td>29</td>
        <td >30</td><td >31</td><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td>7</td>
        <td >8</td><td >9</td><td >10</td><td >11</td><td >12</td><td >13</td><td>14</td>
        <td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td><td>21</td>
        <td >22</td><td >23</td><td >24</td><td >25</td><td >26</td><td >27</td><td>29</td>
        <td >30</td><td >31</td></tr>
        <tr><td class="hc">2</td><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td>7</td>
        <td >8</td><td >9</td><td >10</td><td >11</td><td >12</td><td >13</td><td>14</td>
        <td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td><td>21</td>
        <td >22</td><td >23</td><td >24</td><td >25</td><td >26</td><td >27</td><td>29</td>
        <td >30</td><td >31</td><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td>7</td>
        <td >8</td><td >9</td><td >10</td><td >11</td><td >12</td><td >13</td><td>14</td>
        <td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td><td>21</td>
        <td >22</td><td >23</td><td >24</td><td >25</td><td >26</td><td >27</td><td>29</td>
        <td >30</td><td >31</td><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td>7</td>
        <td >8</td><td >9</td><td >10</td><td >11</td><td >12</td><td >13</td><td>14</td>
        <td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td><td>21</td>
        <td >22</td><td >23</td><td >24</td><td >25</td><td >26</td><td >27</td><td>29</td>
        <td >30</td><td >31</td></tr>
        <tr><td class="hc">3</td><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td>7</td>
        <td >8</td><td >9</td><td >10</td><td >11</td><td >12</td><td >13</td><td>14</td>
        <td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td><td>21</td>
        <td >22</td><td >23</td><td >24</td><td >25</td><td >26</td><td >27</td><td>29</td>
        <td >30</td><td >31</td><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td>7</td>
        <td >8</td><td >9</td><td >10</td><td >11</td><td >12</td><td >13</td><td>14</td>
        <td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td><td>21</td>
        <td >22</td><td >23</td><td >24</td><td >25</td><td >26</td><td >27</td><td>29</td>
        <td >30</td><td >31</td><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td>7</td>
        <td >8</td><td >9</td><td >10</td><td >11</td><td >12</td><td >13</td><td>14</td>
        <td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td><td>21</td>
        <td >22</td><td >23</td><td >24</td><td >25</td><td >26</td><td >27</td><td>29</td>
        <td >30</td><td >31</td></tr>
        <tr><td class="hc">4</td><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td>7</td>
        <td >8</td><td >9</td><td >10</td><td >11</td><td >12</td><td >13</td><td>14</td>
        <td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td><td>21</td>
        <td >22</td><td >23</td><td >24</td><td >25</td><td >26</td><td >27</td><td>29</td>
        <td >30</td><td >31</td><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td>7</td>
        <td >8</td><td >9</td><td >10</td><td >11</td><td >12</td><td >13</td><td>14</td>
        <td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td><td>21</td>
        <td >22</td><td >23</td><td >24</td><td >25</td><td >26</td><td >27</td><td>29</td>
        <td >30</td><td >31</td><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td>7</td>
        <td >8</td><td >9</td><td >10</td><td >11</td><td >12</td><td >13</td><td>14</td>
        <td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td><td>21</td>
        <td >22</td><td >23</td><td >24</td><td >25</td><td >26</td><td >27</td><td>29</td>
        <td >30</td><td >31</td></tr>

</table>

    </div>


    </form>
</body>
</html>

CSS:

CSS

.hc {
           position:fixed;
           width:5em;
           left:0;
           top:auto;
           border-right: 0px none red;
           border-top-width:3px;
           margin-top:-3px;
       }
       .hc:before {content: 'Row ';}
       .long { background:yellow; letter-spacing:1em; }

Posted 25-Sep-14 1:17am

Sharath V Rao

Updated 25-Sep-14 1:25am

v5

Add a Solution

Comments

ZurdoDev 25-Sep-14 7:24am

1. No code showing.
2. IE 7 is pretty old and outdated. You may not want to try and support it. However, you'll have to use the developer tools in IE7 to figure it out.

Sinisa Hajnal 25-Sep-14 7:53am

One dirty solution is to use separate table for that first column and only scroll the other one. Ugly as that is, tables are supported since time immemorial :)

Sharath V Rao 25-Sep-14 8:20am

Ya I agree that IE 7 is outdated but My Application works fine in only IE 7. So I am looking for some work around. Any suggestion is much Appreciated . Thanks !!

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Santhosh Babu Mahimairaj · Answer 1 · 2014-09-25T02:38:00

Solution 1

http://anaturb.net/csstips/sheader.htm[^]

Posted 25-Sep-14 2:38am

Santhosh Babu Mahimairaj