3

HTML 構造

次の html 構造があります:これは編集できない固定構造です

<div class="separator"></div>

<table class="myClass">
    <thead>
        <tr>
            <th>title1</th>
            <th>title2</th>
        </tr>
    </thead>
    ...
</table>

<div class="separator"></div>

CSS

最初と最後の div は、css が次のセパレーターです。

.separator {
   height: 20px;
   background-color: gray;
}

セパレーターは複雑なウィジェットであり、デザインだけではないことに注意してください (意図的に例を単純化しました)

問題

テーブル ヘッダーを最初のセパレータの前に配置したいのですが、テーブル ボディは 2 つのセパレータの間にある必要があります。

私が試したこと

  1. テスト用の最初の jsfiddle は次のとおりです: http://jsfiddle.net/prhgW/1/

  2. thead タグを絶対位置に配置し、負のトップ値を使用しようとしましたが、そうすると、thead の幅がテーブルの 100% よりも小さくなり、列の値に関して列のタイトルがずれてしまいます。フィドル: http://jsfiddle.net/prhgW/2/

  3. また、幅を 100% に設定しようとしましたが、tr タグはそのルールに従っていません: http://jsfiddle.net/prhgW/3/

追加ルール

  • テーブルまたは任意の要素の固定幅/高さを避けたい (そのため、すべてを絶対配置することは受け入れられる解決策ではありません)
  • ブラウザ間の互換性が欲しい
  • JavaScript の修正を避ける (純粋な CSS の方が良いでしょう)
4

4 に答える 4

2

これはあなたの問題に当てはまりますか？

http://jsfiddle.net/prhgW/16/

の下にスペースを追加<th>し、最初のセパレーターを下に移動しました。これは、セパレーターの高さと<th>.

于 2012-06-04T12:03:25.427 に答える
2

私は純粋な CSS でこれをいじってきました。これが私のフォークされた fiddleです。

基本的に、直接の兄弟コンビネータを使用して.separator + .myClass、セパレータに続くテーブルをターゲットにします。次に、表全体を上に移動して、ヘッダーがセパレーターのすぐ上に並ぶようにします。margin-bottomこの移動は、表の下のコンテンツが表にきちんと従うように、同一のもので補われます。最後に、ヘッダー セルにパディングを配置して、セパレーターの下theadに押し込みます。tbody

考えられる注意事項:

  • セパレーターの高さは、固定して把握する必要があります。これはおそらくそれほど問題ではありません。
  • 見出しの高さを固定して把握する必要があります。1emデフォルトで使用しました。
  • セパレータのすぐ上にコンテンツがある場合、表と重なる場合があります。これは問題に固有のものです。条件付きでセパレータに追加のパディングを適用することはできません。セパレーターの後に続くテーブルをターゲットにすることはできますが、テーブルが後に続くセパレーターをターゲットにすることはできません。兄弟コンビネータは、前の兄弟に続く要素に対してのみ機能し、その逆では機能しません。
于 2012-06-04T12:21:43.170 に答える
0

jquery を少し使って、テーブルのタイトルの下に行を追加しました。

<script>
$(document).ready(function(){
$('.myClass thead').append('<tr><td class="separator" colspan=2></td><tr>');
});
</script>
于 2012-06-04T11:51:46.580 に答える
0

テーブル タイトルの下と最後の行の下に灰色の線が必要な場合は、CSS の境界線プロパティを使用して、次のようにスタイルを設定できます。

http://jsfiddle.net/vzGtF/

クラスを使用してセパレータークラスとdivを削除しました。

役立つことを願っています。

于 2012-06-04T11:24:33.407 に答える