CSS разные цвета для таблицы каждой строки - PullRequest
Новая
       10

CSS разные цвета для таблицы каждой строки

3 голосов
/ 26 мая 2011

У меня есть эта таблица со следующим форматированием CSS: 

<table cellspacing="2">
    <tbody>
        <tr>
            <th>Name</th>                            
            <th>Area</th>                            
        </tr>
        <tr>
            <td>${it.conference}</td>                                              
            <td>${it.accepted}</td>                                      
        </tr>
    </tbody>
</table>

И CSS: 

table {
    padding-left: 10px;
    width:90%;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    text-align:left;
}

th, td {
    padding:5px 10px;
}

th {
    color:#666666;
    border-top:2px solid #b7ddf2;
    background-color:#ebf4fb;
}

Как я могу применить отдельные модификации CSS для каждой строки (например, я бынравится менять цвет имени, не путаясь с форматированием других строк, а значит, изменять только его. Это возможно сделать?

Ответы [ 7 ]

4 голосов
/ 26 мая 2011

Ищете ли вы что-то похожее на псевдокласс nth-child ?

Если вы хотите более точный контроль зерна для каждого отдельного элемента, вы можете рассмотреть возможность применения классовим и стилизовать их по-разному.

Редактировать: Вот несколько примеров nth-child.

1 голос
/ 26 мая 2011

С помощью только CSS-метода вам нужно добавить какой-нибудь класс в строку, которую вы хотите стилизовать, например: 

<table cellspacing="2">
      <tbody><tr>
         <th class="color1">Name</th>                            
         <th>Area</th>                            
     </tr>
        <td>${it.conference}</td>                                              
        <td>${it.accepted}</td>                                      
     </tr></tbody>
    </table>

, а затем стилизовать его: 

.color1 {
   background-color: (somecolor);
}
0 голосов
/ 05 июня 2015

Я знаю, что это старый ответ, но я сделал забавный пример в Jquery, и, возможно, он поможет кому-то ответить на его вопрос.

JSFIDDLE

Он получит все <p> элементы из document и будет проходить через них, а jquery сделает это, добавит стиль CSS для каждого <p> элемента на странице.

0 голосов
/ 14 сентября 2013

Чтобы стилизовать строки "Четные" и "Нечетные", используйте CSS3, например: 

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

tr:nth-child(even){
    background:#f5f5f5;}
0 голосов
/ 26 мая 2011

Если вы хотите применить стиль CSS на основе содержимого элемента, это невозможно с помощью CSS.Если, с другой стороны, вы хотите применить стили CSS на основе их положения, вы можете использовать псевдоклассы: nth-child (N).Например 

th:nth-child(1) /*for name*/
{
color: blue;
}

th:nth-child(2) /*for area*/
{
color: red;
}
0 голосов
/ 26 мая 2011

Если вы можете обойтись без поддержки IE 7 и 8, вы можете сделать ... 

th:nth-of-type(1) {
  color: #c00;
}

В противном случае добавьте класс, например th class = "what", а затем ... 

th.whatever {
  color: #c00;
}

Посмотреть демо-версию:

http://jsfiddle.net/GFPgB/

0 голосов
/ 26 мая 2011

применить класс к любому элементу, который вы хотите, и CSS стиль его. http://jsfiddle.net/robx/wzXAJ/ IE: применить <th class="name">Name</th>.

...