0

我有一个带有固定标题的表格，但标题和正文没有正确对齐。列数超过 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 列和表头，其余列可滚动。帮帮我

4

2 回答 2

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. 每当用户滚动时，检查标题是否开始移出屏幕，然后使之前制作的内容可见并将其附加到屏幕顶部。

乍一看，这似乎很多，但这并不是魔术。以下是帮助您入门的其他资源：

让一些东西粘在页面顶部：

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

其他的，我敢肯定，你可以找出来！祝你好运！

于 2013-03-31T21:17:24.237 回答
0

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

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

于 2013-03-31T21:24:50.570 回答