如何只用 css 格式化一个 table

Question

我正在尝试 select 将一个 html 页面上的一个特定 table 格式化为 css。我不希望任何其他地方的任何其他 table 以这种方式格式化，包括在同一页面上。

我在页眉中尝试了这个，但没有用-

<style>
    #table3 {
        td,th { padding: 10px }
        tr:hover { background-color: #f5f5f5 }
    }
</style>

<table id="table3">
...
</table>

Answer 1

你不能那样嵌套选择器。至少不是正常的 CSS.

你想要：

<style>
    #table3 td, #table3 th { padding: 10px }
    #table3 tr:hover { background-color: #f5f5f5 }
</style>

<table id="table3">
...
</table>

Answer 2

这是行不通的，因为这不是 CSS 的格式，尽管您所做的概念是正确的，但格式不正确。

试试这个...

#table3 td, #table3 th {
    padding: 10px;
}

#table3 tr:hover {
    background-color: #f5f5f5;
}

但是，如果您想按照您的方式进行操作。您可以使用 CSS 编译器来完成它，例如 less，您可以在线查看它作为 less js，它使 CSS 轻量级并且更容易编写。

Answer 3

你写的比较像SCSS。如果你需要普通的 CSS，它应该是这样的：

<style>
    #table3 TD {
        padding: 10px;
    }
    #table3 TH {
        padding: 10px;
    }
    #table3 tr:hover {
        background-color: #f5f5f5;
    }
</style>

<table id="table3">
...
</table>

如何只用 css 格式化一个 table

How to format only one table with css

html

css

css-tables