стиль CSS -.первый класс тд.второй класс не работает

У меня есть проблема с оформлением моей таблицы с помощью селекторов классов.

Я хочу два разных цвета, один для элемента th с классом="пауза" и другой цвет для элемента td с тем же именем класса.

Почему этот CSS не работает: 

.timetable th .pause {
    background-color:#F99;
}
.timetable td .pause {
    background-color:#FEE;  
}

На этом HTML?

<table class="timetable">
<thead>
    <tr>
        <th>Tispunkt</th>
                <th style='height:30px;'>08:00</th>
        <th style='height:30px;'>08:30</th>
        <th style='height:30px;'>09:00</th>
        <th style='height:15px;'>09:30</th>
        <th style='height:15px;' class='pause'>09:45</th>
        <th style='height:30px;'>10:00</th>
        <th style='height:30px;'>10:30</th>
        <th style='height:30px;'>11:00</th>
        <th style='height:30px;'>11:30</th>
        <th style='height:30px;'>12:00</th>
        <th style='height:30px;' class='pause'>12:30</th>
        <th style='height:30px;'>13:00</th>
        <th style='height:30px;'>13:30</th>
        <th style='height:30px;'>14:00</th>
        <th style='height:30px;'>14:30</th>
        <th style='height:30px;'>15:00</th>
        <th style='height:30px;'>15:30</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Maskine 4</td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:15px;'></td>
        <td style='height:15px;' class='pause'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;' class='pause'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
    </tr>
</tbody>

Этот CSS работает 

.timetable .pause {
    background-color:#F99;  
}

Но я хочу, чтобы разные цвета на th элементах и td элементах

1 2
css html-table

1 ответ:

Вам нужно следующее: 

.timetable th.pause {
    background-color:#F99;
}
.timetable td.pause {
    background-color:#FEE;  
}

Между тегом и именем класса нет пробела.

2