Как применять css только для второго события

-2

здесь я пытаюсь применить CSS только для второй таблицы.Как применять 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>

Как я решить эту проблему?

источник

2013-09-18 MintY

Checkout Мой ответ. –

ваш 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-18 11:39:51 pbaris

Используйте table.obd вместо table в CSS, и измените все table tr td соответствующие стили.

источник

2013-09-18 11:36:48

-2

Прежде всего, это плохая практика использования столов в современном веб-дизайне. Но если вы являетесь приложением, обратитесь к второй таблице с .obd. Я бы ссылался на id вместо класса, хотя и на обе таблицы.

источник

2013-09-18 11:38:14

Таблицы отлично подходят для табличных данных, которые, как представляется, являются. –

Мне придется с уважением не согласиться на это. Легче писать, да, но таблица не будет отображаться до тех пор, пока не будет загружена вся ее разметка, тогда как отдельные div будут отображены, как только их разметка будет загружена. Это также добавляет больше гибкости в стиле. –

@ DanielSchwarz: да, но вы не используете divs для отображения «реальных» таблиц! –

добавить к первому классу .Первый таблицы, и второе изменение один .second

источник

2013-09-18 11:38:14

DEMO: FIDDLE

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-18 11:44:55

Это то, что вам нужно. !!! ☻ –

Как применять css только для второго события

ответ

Смежные вопросы