带有标题和前3列的可滚动表已修复

时间:2013-03-31 20:57:31

标签: html css html-table

我有一个带固定标题的表,但标题和正文未正确对齐。 no.of列超过25.如果我删除"display:block",则标题不固定。

这是我的代码

 <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>

此代码的相应css在这里

   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
    }

我需要修复表格的前3列和标题,其他列可滚动。帮帮我

2 个答案:

答案 0 :(得分:0)

我已将您的代码放在jsfiddle上以获得更好的可见性:http://jsfiddle.net/

如果我理解正确,你必须至少使用两张桌子。

<table>
    <tr class="fixed">
        <th>column 1, row 1</th>
        <th>column 1, row 2</th>
    </tr>

    <tr class="fixed">
        <td>column 2, row 1</td>
        <td>column 2, row 2</td>
    </tr>

    <tr class="fixed">
        <td>column 3, row 1</td>
        <td>column 3, row 2</td>
    </tr>

    <tr class="fixed">
        <td>column 4, row 1</td>
        <td>column 4, row 2</td>
    </tr>

    <tr>
        <td colspan="2">
            <table class="scrollable">
                <tr>
                    [rest of what you would have put in your main table]
                </tr>
            </table>
        </td>
    </tr>
</table>

要使标题和标题后面的前三列粘贴,您必须使用javascript执行以下两个步骤(例如使用jquery):

  1. 将具有“已修复”类的所有内容复制到一个新的DOM元素中,该元素看起来与网站上的原始内容完全相同
  2. 每当用户滚动检查标题是否开始移出屏幕,然后使之前制作的内容可见并将其附加到屏幕顶部。
  3. 起初看起来可能很多,但这并不神奇。以下是帮助您入门的其他资源:

    将某些内容贴在页面顶部:

    .element {position: fixed; top: 0;}
    

    其他一切,我相信,你可以找到答案!祝你好运!

答案 1 :(得分:0)

我想我发现了你的问题。您的某些CSS会破坏内容单元格的大小,您需要通过在标题行上添加一些padding-right: 17px;来调整滚动条的大小。

这是一个jsFiddle:http://jsfiddle.net/X6Ck5/