-2

ここでは、2 番目のテーブルのみに CSS を適用しようとしています。

しかし、私の Web ページには 2 つのテーブルがあります。この css をテーブルに適用すると、両方のテーブルが css を取得します。しかし、2番目のテーブルにのみ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代わりに使用し、それに応じて関連するすべてのスタイルを変更します。tabletable tr td

于 2013-09-18T11:36:48.600 に答える
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 に答える
0

最初のテーブル クラス .first に追加し、2 番目のクラスに .second を追加します。

于 2013-09-18T11:38:14.860 に答える
-2

まず第一に、現代の Web デザインでテーブルを使用することは悪い習慣です。ただし、断言する場合は、2 番目のテーブルを .obd で参照してください。ただし、両方のテーブルで、クラスの代わりに id を参照します。

于 2013-09-18T11:38:14.830 に答える