SoftPortaver
New Member
I have a table with fixed header but the header and the body are not aligned properly. The no.of columns is more than 25.If I remove "display:block",the header is not fixed.Here is my Code \[code\] <table width="100%" style="font-size:13px" id="data" cellpadding="4" cellspacing="5" border="2" class="scrollTable"> <thead style="background:#e2e2e2" align="center" class="fixedHeader"> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> <th>Header 7</th> <th>Header 8</th> <th>Header 9</th> <th>Header 10</th> <th>Header 11</th> <th>Header 12</th> <th>Header 13</th> <th>Header 14</th> <th>Header 15</th> <th>Header 16</th> <th>Header 17</th> <th>Header 18</th> <th>Header 19</th> <th>Header 20</th> <th>Header 21</th> <th>Header 22</th> <th>Header 23</th> <th>Header 24</th> <th>Header 25</th> <th>Header 26</th> <th>Header 27</th> <th>Header 28</th> <th>Header 29</th> </tr> </thead> <tbody style="background:#f2f2f2;" align="center" class="scrollContent"> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> <td>Data 13</td> <td>Data 14</td> <td>Data 15</td> <td>Data 16</td> <td>Data 17</td> <td>Data 18</td> <td>Data 19</td> <td>Data 20</td> <td>Data 21</td> <td>Data 22</td> <td>Data 23</td> <td>Data 24</td> <td>Data 25</td> <td>Data 26</td> <td>Data 27</td> <td>Data 28</td> <td>Data 29</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> <td>Data 13</td> <td>Data 14</td> <td>Data 15</td> <td>Data 16</td> <td>Data 17</td> <td>Data 18</td> <td>Data 19</td> <td>Data 20</td> <td>Data 21</td> <td>Data 22</td> <td>Data 23</td> <td>Data 24</td> <td>Data 25</td> <td>Data 26</td> <td>Data 27</td> <td>Data 28</td> <td>Data 29</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> <td>Data 13</td> <td>Data 14</td> <td>Data 15</td> <td>Data 16</td> <td>Data 17</td> <td>Data 18</td> <td>Data 19</td> <td>Data 20</td> <td>Data 21</td> <td>Data 22</td> <td>Data 23</td> <td>Data 24</td> <td>Data 25</td> <td>Data 26</td> <td>Data 27</td> <td>Data 28</td> <td>Data 29</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> <td>Data 13</td> <td>Data 14</td> <td>Data 15</td> <td>Data 16</td> <td>Data 17</td> <td>Data 18</td> <td>Data 19</td> <td>Data 20</td> <td>Data 21</td> <td>Data 22</td> <td>Data 23</td> <td>Data 24</td> <td>Data 25</td> <td>Data 26</td> <td>Data 27</td> <td>Data 28</td> <td>Data 29</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> <td>Data 13</td> <td>Data 14</td> <td>Data 15</td> <td>Data 16</td> <td>Data 17</td> <td>Data 18</td> <td>Data 19</td> <td>Data 20</td> <td>Data 21</td> <td>Data 22</td> <td>Data 23</td> <td>Data 24</td> <td>Data 25</td> <td>Data 26</td> <td>Data 27</td> <td>Data 28</td> <td>Data 29</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> <td>Data 13</td> <td>Data 14</td> <td>Data 15</td> <td>Data 16</td> <td>Data 17</td> <td>Data 18</td> <td>Data 19</td> <td>Data 20</td> <td>Data 21</td> <td>Data 22</td> <td>Data 23</td> <td>Data 24</td> <td>Data 25</td> <td>Data 26</td> <td>Data 27</td> <td>Data 28</td> <td>Data 29</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> <td>Data 13</td> <td>Data 14</td> <td>Data 15</td> <td>Data 16</td> <td>Data 17</td> <td>Data 18</td> <td>Data 19</td> <td>Data 20</td> <td>Data 21</td> <td>Data 22</td> <td>Data 23</td> <td>Data 24</td> <td>Data 25</td> <td>Data 26</td> <td>Data 27</td> <td>Data 28</td> <td>Data 29</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> <td>Data 13</td> <td>Data 14</td> <td>Data 15</td> <td>Data 16</td> <td>Data 17</td> <td>Data 18</td> <td>Data 19</td> <td>Data 20</td> <td>Data 21</td> <td>Data 22</td> <td>Data 23</td> <td>Data 24</td> <td>Data 25</td> <td>Data 26</td> <td>Data 27</td> <td>Data 28</td> <td>Data 29</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> <td>Data 13</td> <td>Data 14</td> <td>Data 15</td> <td>Data 16</td> <td>Data 17</td> <td>Data 18</td> <td>Data 19</td> <td>Data 20</td> <td>Data 21</td> <td>Data 22</td> <td>Data 23</td> <td>Data 24</td> <td>Data 25</td> <td>Data 26</td> <td>Data 27</td> <td>Data 28</td> <td>Data 29</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> <td>Data 13</td> <td>Data 14</td> <td>Data 15</td> <td>Data 16</td> <td>Data 17</td> <td>Data 18</td> <td>Data 19</td> <td>Data 20</td> <td>Data 21</td> <td>Data 22</td> <td>Data 23</td> <td>Data 24</td> <td>Data 25</td> <td>Data 26</td> <td>Data 27</td> <td>Data 28</td> <td>Data 29</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> <td>Data 13</td> <td>Data 14</td> <td>Data 15</td> <td>Data 16</td> <td>Data 17</td> <td>Data 18</td> <td>Data 19</td> <td>Data 20</td> <td>Data 21</td> <td>Data 22</td> <td>Data 23</td> <td>Data 24</td> <td>Data 25</td> <td>Data 26</td> <td>Data 27</td> <td>Data 28</td> <td>Data 29</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> <td>Data 13</td> <td>Data 14</td> <td>Data 15</td> <td>Data 16</td> <td>Data 17</td> <td>Data 18</td> <td>Data 19</td> <td>Data 20</td> <td>Data 21</td> <td>Data 22</td> <td>Data 23</td> <td>Data 24</td> <td>Data 25</td> <td>Data 26</td> <td>Data 27</td> <td>Data 28</td> <td>Data 29</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> <td>Data 7</td> <td>Data 8</td> <td>Data 9</td> <td>Data 10</td> <td>Data 11</td> <td>Data 12</td> <td>Data 13</td> <td>Data 14</td> <td>Data 15</td> <td>Data 16</td> <td>Data 17</td> <td>Data 18</td> <td>Data 19</td> <td>Data 20</td> <td>Data 21</td> <td>Data 22</td> <td>Data 23</td> <td>Data 24</td> <td>Data 25</td> <td>Data 26</td> <td>Data 27</td> <td>Data 28</td> <td>Data 29</td> </tr> </tbody> </table>\[/code\]The corresponding css for this code is here \[code\] div.tableContainer {clear: both;height: 360px;overflow: auto;width: 1024px } /* define width of table. Add 16px to width for scrollbar. */ html>body div.tableContainer table {width: 1024px } html>body thead.fixedHeader tr {display: block } thead.fixedHeader th {background: #C96;border-left: 1px solid #EB8;border-right: 1px solid #B74;border-top: 1px solid #EB8;font-weight: normal;padding: 4px 3px;text-align: center } thead.fixedHeader {color: #000;display: block;text-decoration: none;width: 100%;} html>body tbody.scrollContent {display: block;height: 262px;overflow: auto;width:100%; } tbody.scrollContent td, tbody.scrollContent tr.normalRow td {background: #FFF;border-bottom: none;border-left: none;border-right: 1px solid #CCC;border-top: 1px solid #DDD;padding: 2px 3px 3px 4px } tbody.scrollContent tr.alternateRow td {background: #EEE;border-bottom: none;border-left: none;border-right: 1px solid #CCC;border-top: 1px solid #DDD;padding: 2px 3px 3px 4px } html>body thead.fixedHeader th {width: 60px } html>body thead.fixedHeader th + th {width: 140px } html>body thead.fixedHeader th + th + th {width: 360px } html>body tbody.scrollContent td {width: 60px } html>body tbody.scrollContent td + td {width: 140px } html>body tbody.scrollContent td + td + td {width: 360px }\[/code\]I need the first 3 columns and header of the table to be fixed and rest of the columns scrollable.Help me out