-2

在这里，我试图仅将 css 应用于第二个表。

但是在我的网页中，我有 2 个表格，如果我将这个 css 应用于表格，那么两个表格都在使用 css。但我只想将 css 应用于第二个表。

CSS代码：

body{
    background:url(aya.jpg);
}

table { 
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    width: 640px; 
    border-collapse: 
    collapse; border-spacing: 0; 
}

td, th { 
    border: 1px solid black;
    height: 30px; 
    transition: all 0.3s;
}

th {
    background: #757575;
    font-weight: bold;
    color:white;
}

td {
    background: #FAFAFA;
    text-align: center;
}

tr:nth-child(even) td { 
    background: #F2F2F2; 
}   

tr:nth-child(odd) td { 
    background: #E6ECF2; 
}

html代码

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/common-style.css">
<link rel="stylesheet" type="text/css" href="css/button.css">
</head>
<body>
<center>

<table>
<tr>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
</tr>
<tr>
    <td>Apples</td>
    <td>Carrots</td>
    <td>Steak</td>
</tr>
<tr>
    <td>Oranges</td>
    <td>Potato</td>
    <td>Pork</td>
</tr>
<tr>
    <td>Pears</td>
    <td>Peas</td>
    <td>Chicken</td>
</tr>
</table>


<table class="obd">
<tr>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
</tr>
<tr>
    <td>Apples</td>
    <td>Carrots</td>
    <td>Steak</td>
</tr>
<tr>
    <td>Oranges</td>
    <td>Potato</td>
    <td>Pork</td>
</tr>
<tr>
    <td>Pears</td>
    <td>Peas</td>
    <td>Chicken</td>
</tr>
</table>



</center>
</body>
</html>

我该如何解决这个问题？

4

5 回答 5

2

演示：小提琴

CSS 将表更改为某个 ID：

body{
background:url(aya.jpg);
}
#tableSec { 
 color: #333;
 font-family: Helvetica, Arial, sans-serif;
 width: 640px; 
 border-collapse: 
 collapse; border-spacing: 0; 
}

#tableSec td, #tableSec th { 
 border: 1px solid black;
 height: 30px; 
 transition: all 0.3s;
}

#tableSec th {
 background: #757575;
 font-weight: bold;
 color:white;
}

#tableSec td {
 background: #FAFAFA;
 text-align: center;
}


tableSec tr:nth-child(even) td { 
background: #F2F2F2; 
}   

#tableSec tr:nth-child(odd) td { 
background: #E6ECF2; 
}

在 html 代码中给出所需的 ID 表：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/common-style.css">
<link rel="stylesheet" type="text/css" href="css/button.css">
</head>
<body>
<center>

<table>
<tr>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
</tr>
<tr>
    <td>Apples</td>
    <td>Carrots</td>
    <td>Steak</td>
</tr>
<tr>
    <td>Oranges</td>
    <td>Potato</td>
    <td>Pork</td>
</tr>
<tr>
    <td>Pears</td>
    <td>Peas</td>
    <td>Chicken</td>
</tr>
</table>


<table class="obd" id="tableSec">
<tr>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
</tr>
<tr>
    <td>Apples</td>
    <td>Carrots</td>
    <td>Steak</td>
</tr>
<tr>
    <td>Oranges</td>
    <td>Potato</td>
    <td>Pork</td>
</tr>
<tr>
    <td>Pears</td>
    <td>Peas</td>
    <td>Chicken</td>
</tr>
</table>



</center>
</body>
</html>
于 2013-09-18T11:44:55.707 回答
1

将您的 CSS 更改为

table.obd { 
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    width: 640px; 
    border-collapse: 
    collapse; border-spacing: 0; 
}

table.obd td, table.obd th { 
    border: 1px solid black;
    height: 30px; 
    transition: all 0.3s;
}

table.obd th {
    background: #757575;
    font-weight: bold;
    color:white;
}

table.obd td {
    background: #FAFAFA;
    text-align: center;
}


table.obd tr:nth-child(even) td { 
    background: #F2F2F2; 
}   

table.obd tr:nth-child(odd) td { 
    background: #E6ECF2; 
}
于 2013-09-18T11:39:51.157 回答
1

在 CSS 中使用table.obd代替，并相应地更改所有相关样式。tabletable tr td

于 2013-09-18T11:36:48.600 回答
0

添加到第一个表类 .first 和第二个 .second

于 2013-09-18T11:38:14.860 回答
-2

首先，在现代网页设计中使用表格是一种不好的做法。但是，如果您坚持，请使用 .obd 引用第二个表。不过，我会在两个表上都使用 id 而不是类来引用。

于 2013-09-18T11:38:14.830 回答