html 某table內的td內容背景變色

請問一下

如何讓某table內的rd內容背景變色呢

例如從ffffff變eeeeee

滑鼠移過去後背景變色

不管有幾欄

那一整排都會變色

每移過去一列 就會變色這樣

但不是全部變色

而是滑鼠移過去一排一排變

已更新項目:

可以使用 謝謝

那請問

如果想讓某一table變色就好 該怎麼做呢

我嘗試使用

.wa table tbody tr{

background-color: #FFF;

}

.wa table tbody tr:hover{

background-color: #EEE;

}

然後table加上class="wa"

卻不行了

2 個已更新項目:

另外我想問 一定要加入tbody嗎

3 個已更新項目:

假設

.tab table > tbody > tr{

background-color: #FFF;

}

.tab table > tbody > tr:hover{

background-color: #EEE;

}

class=tab

測試後不行..

4 個已更新項目:

謝謝成功了

但我想請問一下

就是我第一列已經有顏色在了

我不想讓他全部的都變色

如何列過第一列呢

5 個已更新項目:

跳過第一列

6 個已更新項目:

疑?似乎是語法被吃掉了嗎

7 個已更新項目:

< 第一列

1-1

1-2

2-1

2-2

變這樣嗎

8 個已更新項目:

<table border="1">

< 第一列

1-1

1-2

2-1

2-2

9 個已更新項目:

疑?其實我有點不懂

因為我第一列已經有顏色 我不要讓他可以變換

我把td全改成th 還是不行

10 個已更新項目:

我知道了

我再增加一個thead就行了

2 個解答

評分
  • 6 年前
    最佳解答

    測試用的 HTML:

    <table border="1">

    <tbody>

    <tr>

    <td>1-1</td>

    <td>1-2</td>

    </tr>

    <tr>

    <td>2-1</td>

    <td>2-2</td>

    </tr>

    </tbody>

    </table>

    ======== css ==========

    table > tbody > tr{

    background-color: #FFF;

    }

    table > tbody > tr:hover{

    background-color: #EEE;

    }

    2013-10-21 19:40:06 補充:

    一.

    選擇 class="wa"的 table

    寫法是 table.wa

    .wa table tbody tr => table.wa tbody tr 或 .wa tbody tr

    二.

    tbody可以省,但目前瀏覽器大都會自動補上

    如果有 表頭、表尾,可以只讓 內容變色

    三.:

    同 一. : )

    2013-10-21 21:14:46 補充:

    方式蠻多的

    一. 放到表頭 (thead),例如 tbody上面增加:

    0-1

    0-2

    該列如果是標題, 可改成 。

    通用

    二. 修改原本的選擇器

    table > tbody > tr:nth-child(n+2)

    table > tbody > tr:nth-child(n+2):hover

    IE9以上支援

    三. 效果改用JS

    通用

    ...

    ===========

    推薦 一.。如果需要 三.,再補充

    2013-10-21 21:20:05 補充:

    一.的標籤被吃掉了

    <thead>

    <tr>

    <td>0-1</td>

    <td>0-2</td>

    </tr>

    </thead>

    該列如果是標題,<td>可改成<th>

    • 登入以對解答發表意見
  • 其實小第還有幾個問題仍在發問中

    希望您可以抽空幫助小第

    謝謝

    • 登入以對解答發表意見
還有問題?馬上發問,尋求解答。