修复了Repeater中的Header Scrollable Table

Question

我找到了一个简单的css解决方案，让html table具有可滚动的<tbody>和固定的<thead>，我发现它非常好。这是来源：Source

现在，我将同一个css应用到我的asp:Repeater，但似乎有一点问题，但如果表不在转发器中，它可以正常工作。

这是我用的css：

<style type="text/css">
div.tableContainer{
    clear:both;
    border: 1px solid black;
    height: 300px;
    overflow: auto;
    width: 100%;
}
html>body div.tableContainer{
    overflow: hidden;
    width: 100%;    
    border: 1px solid black;
}
thead.fixedHeader tr{
    position: relative;
}
thead.fixedHeader th{
    background: yellow;
    border-right: 1px solid #000;  
    border-bottom: 1px solid #000;
    font-weight: normal;
    padding: 4px 3px;
}

html>body tbody.scrollContent{
    display: block;
    height: 245px;    
    overflow: auto;
    width: 100%;
}
html>body thead.fixedHeader{
    display: table;
    overflow: auto;
    width: 100%;
}
tbody.scrollContent td{
    background: #fff;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    height: 50px;
}

/* column widths */
 tbody tr:first-of-type .four{
     width: 4%;
 }
 tbody tr:first-of-type .five{
     width: 5%;
 }
 tbody tr:first-of-type .six{
     width: 6%;
 }
 tbody tr:first-of-type .eight{
     width: 8%;
 }
 tbody tr:first-of-type .seventeen{
     width: 17%;
 }
</style>

..这就是asp:Repeater编码的方式：

<div id="tableContainer" class="tableContainer">
    					<asp:Repeater ID="rpt" runat="server">
                            <HeaderTemplate>
                                <%--<table id="tbl-content" width="95%" class="tftable">
                                    <thead>--%>                            
                                    <table cellpadding="0" cellspacing="0" width="100%">
                                        <thead class="fixedHeader">
                                        <tr>
                                            <th rowspan="2" width="4%" style="text-align:center;"><strong>#</strong></th>
                                            <th rowspan="2" width="8%" style="text-align:center;"><strong>CID</strong></th>
                                           <th rowspan="2" width="17%" style="text-align:center;"><strong>Name</strong></th>
                                            <th rowspan="2" width="5%" style="text-align:center;"><strong>Gender</strong></th>
                                            <th rowspan="2" width="5%" style="text-align:center;"><strong>Age</strong></th>
                                            <th rowspan="2" width="5%" style="text-align:center;"><strong>XX</strong></th>
                                            <th rowspan="2" width="5%" style="text-align:center;"><strong>XX</strong></th>
                                            <th rowspan="2" width="5%" style="text-align:center;"><strong>XX</strong></th>
                                            <th colspan="11" width="46%" style="text-align:center;"><strong>XX</strong></th>
                                        </tr>
                                        <tr>
                                            <th width="4%" style="text-align:center;">A</th>
                                            <th width="4%" style="text-align:center;">B</th>
                                            <th width="4%" style="text-align:center;">C</th>
                                            <th width="4%" style="text-align:center;">D</th>
                                            <th width="4%" style="text-align:center;">E</th>                                            
                                            <th width="4%" style="text-align:center;">F</th>
                                            <th width="4%" style="text-align:center;">G</th>                                            
                                            <th width="4%" style="text-align:center;">H</th>
                                            <th width="4%" style="text-align:center;">I</th>
                                            <th width="4%" style="text-align:center;">J</th>
                                            <th width="6%" style="text-align:center;">K</th>
                                        </tr>
                                    </thead>
                                    <tbody class="scrollContent">                                    
                              </HeaderTemplate>
                              <ItemTemplate>
                                        <tr>
                                            <td align="left" class="four"><%# Container.ItemIndex + 1 %></td>
                                            <td align="left" class="eight">Data 1</td>
                                            <td align="left" class="seventeen">&nbsp;<%#DataBinder.Eval(Container.DataItem, "FULLNAME")%></td>
                                            <td class="five"><center><%#DataBinder.Eval(Container.DataItem, "GENDER")%></center></td>
                                            <td class="five"><center><%#DataBinder.Eval(Container.DataItem, "AGE")%></center></td>
                                            <td class="five"><center>Data</center></td>   
                                            <td class="five"><center>Data</center></td>
                                            <td class="five"><center>Data</center></td>
                                            <td class="four"><center>Data</center></td>
                                            <td class="four"><center>Data</center></td>
                                            <td class="four"><center>Data</center></td>
                                            <td class="four"><center>Data</center></td>
                                            <td class="four"><center>Data</center></td>
                                            <td class="four"><center>Data</center></td>
                                            <td class="four"><center>Data</center></td>
                                            <td class="four"><center>Data</center></td>
                                            <td class="four"><center>Data</center></td>
                                            <td class="four"><center>Data</center></td>
                                            <td class="four"><center>Data</td>
                                        </tr>
                            </ItemTemplate>
                            <FooterTemplate>
                                    </tbody>
                                </table>                            
                            </FooterTemplate>
                        </asp:Repeater>
                        </div>

<tbody>的宽度已设置为100％，但它不会延伸到div的末尾，尽管滚动位于右侧（最后一个后面有一个小空格） tbody的列和滚动之前的。我尝试更改html>body tbody.scrollContent的显示css设置，但我仍无法扩展<tbody>。请帮忙。谢谢:)）