javascript - 使表头始终可见并始终居中

Question

我知道还有很多其他主题。事实上，这就是我能够从其他人发布的一些示例代码开始，然后根据我的需要调整它的方式。我的问题是我无法让表格标题始终居中。

#TableHeaderFixed {
    position:fixed;
    margin:0 auto 0 auto;
    top:0px; 
    width:900px;
    display:none;
}

不用担心我的 javascript 处理的“display:none”会影响它的可见性。我一直在尝试阅读并查看“margin”参数是否与“top”参数冲突。这是关键:我可以删除 margin 参数。但我无法删除顶部，或将其更改为其他任何内容，我的 javascript 依赖于它。是的，它需要固定位置。糟透了，但这就是我必须处理的。我已经尝试过使用

top:0
left:50%
margin-left:-250px

左边会把它居中，然后左边的边距是宽度的一半，把它带回来，但这是行不通的。同样，margin-left 似乎与 left 冲突，就像我之前提到的 top 与 margin 冲突一样，因为 margin 命令永远不起作用，所以它偏离了中心。

如果您需要更多详细信息，请告诉我。

插件:

<asp:Table ID="UnitList2" runat="server" />
<asp:Table ID="TableHeaderFixed" runat="server" />

.

<script type="text/javascript">
   var tableOffset = $("#UnitList2").offset().top;
   var $header = $("#UnitList2 > thead").clone();
   var $fixedHeader = $("#<%= TableHeaderFixed.ClientID %>").append($header);

   $(window).bind("scroll", function () {
       var offset = $(this).scrollTop();

       if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
           $fixedHeader.show();
       }
       else if (offset < tableOffset) {
           $fixedHeader.hide();
       }
   });

.

<style>
#TableHeaderFixed {
    position:fixed;
    margin:0 auto 0 auto;
    top:0px; 
    width:900px;
    display:none;
}
</style>

所以您可以看到，是 Javascript 复制了 UnitList2 表的表头，然后在您滚动到实际表头之外时使其可见，而在您向上滚动时不可见。

服务器端样式

        TableHeaderFixed.Width = "900"
        TableHeaderFixed.Attributes.CssStyle.Add("margin-top", "0px")
        TableHeaderFixed.Attributes.CssStyle.Add("margin-left", "auto")
        TableHeaderFixed.Attributes.CssStyle.Add("margin-right", "auto")
        TableHeaderFixed.CellPadding = "2"
        TableHeaderFixed.CellSpacing = "0"

Answer 1

更新:

试试这些。

http://jsfiddle.net/EdwJv/

忽略代码，去fiddle

<table> 
<colgroup>
<col span="1" style="width: 10%;">
<col span="1" style="width: 20%;">
<col span="1" style="width: 70%;">
</colgroup>
<thead>....</table>

头部的 CSS

#hor-minimalist-b th {
    font-size: 17px;
    font-weight: normal;
    color: #719ECE;
    padding: 10px 8px;
    border-bottom: 2px solid #6678b1;
    text-align:center;
}