在IE7中冻结HTML表的第一列 [英] Freeze first column of a HTML table in IE7
本文介绍了在IE7中冻结HTML表的第一列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
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：
HTML :
<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; }推荐答案
http://anaturb.net/csstips/sheader.htm[^]
这篇关于在IE7中冻结HTML表的第一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
