Question

<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>

我想将此应用于仅包含其他表的html页面中的单个表。我不想把这种风格放在那些桌子上我们可以真正做我要求的吗？如果是，请提供一些参考答案。

Answer 1

<style type="text/css">
table.myTable
{
border-collapse:collapse;
}
table.myTable, table.myTable td, table.myTable th
{
border:1px solid green;
}
table.myTable th
{
background-color:green;
color:white;
}
</style>

然后将该表更改为具有如下的类属性：

<table class="myTable">

Answer 2

您可以创建一个类并将其用于您希望样式处理的表

table.myStyles
{
border-collapse:collapse;
}
table.myStyles, .myStyles td, .myStyles th
{
border:1px solid green;
}
.myStyles th
{
background-color:green;
color:white;
}

然后为你的表

<table class="myStyles">....</table>

Answer 3

您需要执行以下操作之一：

修改表格的html以提供table和ID或class，然后将您的CSS修改为table.foo
仅当表格是使用:first-child，:last-child

Answer 4

这很容易做到。只需给表格一个id，然后在你的css代码中使用'＃'来引用这个想法。

Answer 5

<style type="text/css">
  .green-table {
    border-collapse:collapse;
  }
  .green-table td, .green-table th {
    border:1px solid green;
  }
  .green-table th {
    background-color:green;
    color:white;
  }
</style>

<table class="green-table">
    ...
</table>

如何将样式限制为仅部分html

5 个答案: