私は CSS を初めて使用し、最新の標準ブラウザーでレンダリングされるイントラ Web アプリケーションに取り組んでいます (IE サポートは必要ありません)。私はこのサイトや他のサイトで答えを探すのに多くの時間を費やしました.
必要なものは次のとおりです。
- 1 つのヘッダー行と複数の本文行を持つテーブル。
- ヘッダー行の下の実線の境界線。
- ヘッダー行と最初の本文行の間の垂直方向の空白 (パディング? マージン? 間隔?) のみ。
- マウス ホバーで強調表示されている本文の行。
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>