13

私は CSS を初めて使用し、最新の標準ブラウザーでレンダリングされるイントラ Web アプリケーションに取り組んでいます (IE サポートは必要ありません)。私はこのサイトや他のサイトで答えを探すのに多くの時間を費やしました.

必要なものは次のとおりです。

  1. 1 つのヘッダー行と複数の本文行を持つテーブル。
  2. ヘッダー行の下の実線の境界線。
  3. ヘッダー行と最初の本文行の間の垂直方向の空白 (パディング? マージン? 間隔?) のみ。
  4. マウス ホバーで強調表示されている本文の行。

table のスタイルを設定するまで (2) を表示できませんでしたborder-collapse: collapse;。罰金。しかし、(3) どうやら でのみ動作しborder-spacing<td>要素 (<tbody>または<tr>ではなく) でのみ動作しcollapseます。一方、なんらかの理由で、 、、または要素marginの は認識されませんが、最初の行にマウスを合わせると、余白全体が- which-is-implemented-as-も強調表示され、吐き気を催します。<thead><tr><th>padding-top<td>padding

テーブルのヘッダーと本文の間に数ピクセルの余白があることは、本当に左端から外れているようなものであることは知っています。私は安いデートではありません。

1) マークアップを変更せずにそれを行う方法を言う (それにより、CSS が明らかに奨励するように設計されたコンテンツからのプレゼンテーションの分離を維持する)または2) CSS が奇妙であることに同意します。

<head><style>
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  thead {
    border-bottom: 4px solid #123456;
  }
  /*** something goes here ***/
  tbody tr:hover {
    background-color: #ABCDEF;
  }
</style></head>

<body>
  <table>
    <thead>
      <tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
    </thead>
    <tbody>
      <tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
      <tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
      <tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
    </tbody>
  </table>
</body>
4

5 に答える 5

0

さて、順番に:

1: 1 つのヘッダー行と複数の本文行を持つテーブル:

これは、要素theadと要素tbodyが設計された目的です。

<table>
    <thead>
        <tr><th>heading one</th><th>Heading two</th></tr>
    </thead>
    <tbody>
        <!--
            all body table rows in here
        -->
    </tbody>
</table>

また、使用する場合は、要素のtfootに宣言する必要があります (参照を参照) 。tbody

2:ヘッダー行の下の実線の境界線:

    thead tr th {
        border-bottom: 2px solid #000;
    }

th要素内のthead要素を選択します。trセレクターはおそらくここでは不要であり、害はありませんが、次のように簡略化できますthead th {/*...*/}

3:ヘッダー行と最初の本文行の間の垂直方向の空白 (パディング? マージン? 間隔?) のみ。、または要素にpaddingは適用できないようです。これらは本質的に(おそらく)「非視覚的」であるため、要素で定義する必要があります。これは、ホバー時に、最初の行によって占められている非常に大きな「行」があることを意味します(次の部分を参照)。theadtbodytrtd:hover

    tbody tr:first-child td {
        padding-top: 1em;
    }

4:マウス ホバー時に本文の行が強調表示されます。

    tbody tr:hover td {
        background-color: #ffa;
    }

:hover現在ホバーされているセルとその後の兄弟 (一般的な兄弟コンビネーターを使用) に a を適用でき~ますが、以前に表示された兄弟にスタイルを適用することはできません。.td:hovertr

のスタイルを変更するのでtdはなく ( の を直接変更するのでbackground-colorはなく) する必要trがある理由は、通常、td要素はデフォルトで透明な背景に設定されていないためです。background-colorbackground-colortd

JS フィドルのデモ

参考文献:

于 2012-06-04T00:11:06.187 に答える
0

のように先頭に空の行を追加するのはどうですか

<tbody>
    <tr><td> </td></tr>
    <tr><td>blablablabla</td></tr>

そして、このCSSを使用してください

tbody tr:first-child td{
    padding-top: 15px;
}
tbody tr:first-child:hover{    
    background-color: transparent;
}

パディングは最初の行に追加され、最初の行はマウスオーバーで強調表示されませんか? :)

于 2016-03-04T13:41:36.443 に答える
0

マージンはブロック要素(インラインブロックを含む)にのみ適用できるため、最初のテーブル行に適用marginするには、最初にそれを作成する必要がありますdisplay: block;

しかし、これはポジショニングを使用した別のソリューションです。

<head><style>
  table {
    border-collapse: collapse;
    border-spacing: 0;
    position: relative; /* Add positioning */
    margin-top: 40px; /* Add some margin */
  }
  thead {
    border-bottom: 4px solid #123456;
  }
  /*** something goes here ***/
  thead {
    position: absolute; /* Position this element absolute */
    top: -40px;  /* And move it up */
  }
  tbody tr:hover {
    background-color: #ABCDEF;
  }
</style></head>

<body>
  <table>
    <thead>
      <tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
    </thead>
    <tbody>
      <tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
      <tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
      <tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
    </tbody>
  </table>
  <p>Thats how its done!</p>
</body>

基本的position: relative;に、テーブルとposition: absolute;スレッドに適用します。topbottomleftおよびrightプロパティを使用して、テーブル内でテアドを移動できるようになりました。top: -40px; We do not apply to tbody を使用して 40 ピクセル上に移動しますposition: absolute;。これを行うと、この要素は「ページを引き延ばす」ことはなくなります。つまり、後続のすべての要素がその高さを無視します。(それをやってみて、次のように何が起こるか見てください

ブロック) 残された唯一のことは、テーブル自体にいくつかのマージントップを適用し、それを下に移動することです (テーブルを上に移動したように)

はい、CSS は時々少し奇妙に見えることがありますが、これはほとんどの場合、一部のページ要素 (テーブルとその子要素) の処理方法を忘れているためです。

于 2012-06-04T00:14:30.690 に答える