Question

我在HTML页面中有几个表。但对于每个表我都想应用不同的CSS样式。如果我使用此代码，我将为每个表应用样式。

th, td {
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
}

我如何只为一张桌子应用这种风格？

我试过这个

.intro{
    th, td {
        padding-right: 10px;
        padding-top: 7px;
        padding-bottom: 7px;
        /*    margin: 10px;*/
    }}

Answer 1

对所需的表使用class或id。请查看以下示例。

＆＃13;

.mystyle th,
.mystyle td {
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  background-color: palegreen;
}

＆＃13;

<b><i>Only this table will have the specified styles</i></b>
<table class="mystyle">
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
  </tr>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
  </tr>
  <tr>
    <td>Content 3</td>
    <td>Content 4</td>
  </tr>
</table>

<hr>

<b><i>This table doesn't inherit the styles</i></b>

<table>
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
  </tr>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
  </tr>
  <tr>
    <td>Content 3</td>
    <td>Content 4</td>
  </tr>
</table>

＆＃13;

Answer 2

每个表都需要被赋予一个独特的类，然后才能被专门定位。

HTML：

<table class="first">
    <!--table elements-->
</table>
<table class="second">
    <!--table elements-->
</table>

CSS：

table.first th, table.first td{
    /*properties*/
}
table.second th, table.second td{
    /*properties*/
}

为表设置CSS样式

2 个答案: