2

複数の行を持つ単純なテーブルがあります。一番上の行には見出しが含まれ、その下の行には data の id 属性があります。id 属性データのみを持つテーブル行に CSS を設定しようとしましたが、これまでテーブル全体にしか設定できませんでした。

<table width = "80%" align="center" id="example">
<tr>
<td><h3>ID</h3></td>
<td><h3>First Name</h3></td>
<td><h3>Last Name</h3></td>
</tr>
<tr id="data">
<td>1</td>
<td>Joe</td>
<td>Schmoe## Heading ##</h3><td>
</tr>
</table>

そしてCSS。#example tr を tr #data に変更しようとしましたが、うまくいきませんでした。単純なものを見落としていることは知っていますが、何がわからないのですか。

table#example {
    border-collapse: collapse;   
}
tr #data{
    background-color: #eee;
    border-top: 1px solid #fff;
}
tr #data:hover {
    background-color: #ccc;
}
tr #data {
    background-color: #fff;
}
tr #data th, tr #data td {
    padding: 3px 5px;
}
tr #data td:hover {
    cursor: pointer;
}

私は CSS に精通しておらず、id を 1 回しか使用できないことは、必要なものの制限ではないため、クラスを使用していません。

4

1 に答える 1

5

クラスを使用することもできますが、クラスをまったく使用しない方がよいでしょう (HTML マークアップはあなたの味方です)。あなたの問題に対するきれいな解決策は次のとおりです。

HTML

<table>
    <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Joe</td>
        <td>Schmoe</td>
    </tr>
</table>

CSS

th {
  font-weight: bold;
  /* More styles here */
}

td {
  background: #EEE;
  border-top: 1px solid #FFF;
}

tr:hover td {
  cursor: pointer;
  background: #CCC;
}

/* Styles upon styles */

th要素を使用してテーブル ヘッダーを指定するだけです。マウスを上に置いたときに各テーブル データ行を強調表示するには、単純にtr:hover tdルールを使用してそのケースをキャッチします。実際の例については、このフィドルを参照してください。

于 2012-11-15T00:39:46.170 に答える