0

これには他にも多くのトピックがあることを知っています。実際、他の誰かが投稿したサンプルコードから始めて、それを自分のニーズに合わせて微調整することができました。私の問題は、テーブル ヘッダーを常に中央に配置できないことです。

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

「display:none」について心配する必要はありません。私の JavaScript は、可視化と非可視化を処理します。「マージン」パラメーターが「トッ​​プ」パラメーターと競合しているかどうかを調べて確認しようとしています。ここに重要な点があります。margin パラメータを削除できます。しかし、トップを削除したり、他のものに変更したりすることはできません。私のjavascriptはそれに依存しています。はい、それは固定位置である必要があります。悪いが、それは私が働かなければならないことだ。私はすでに使用してみました

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

左はそれを中央に配置し、左の余白はそれを元に戻すために幅の半分を構成しますが、これは機能しません。前述のように、margin-left は左と競合しているように見えます。これは、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>

したがって、UnitList2 テーブル ヘッダーの複製を取得し、実際のヘッダーを超えてスクロールすると表示され、上にスクロールすると非表示になるのは Javascript であることがわかります。

サーバー側のスタイリング

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

2 に答える 2

0

OPは編集とコメントに次のように書いています。

答え：

理解した。

適用されていた ASP css スタイルは、インラインまたは css スタイルシート ルールよりも優先されていました。

ASPコードでは、「margin-left:auto; margin-right:auto;」の行にスタイルを入れていました。中心にしようとします。次に、インラインスタイルを中央に配置しようとすると、「左：50％;マージン左：-450px;」ASPスタイルがすでに適用されているか、後で適用され、優先されるため、マージンcssを取得していませんでした。

2207792 助けてくれてありがとう

于 2016-11-26T20:50:36.797 に答える
0

更新しました：

これらを試してみてください。

http://jsfiddle.net/EdwJv/

コードを無視してフィドルへ

<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;
}
于 2013-04-26T19:03:04.627 に答える