Почему содержимое таблицы отображается вне таблицы?

Question

[MODifikaTOR]

Верстаю таблицу, пишу для ячеек стили, но они не применяются. Обнаружил, что содержимое таблицы отображается перед ней. Как мне это исправить чтобы и содержимое нормально отображалось и стили применялись? Смотрел через хром и мазиллу.


Код таблицы:

<table clas="table_price">
                <th>
                   <tr>Наименовение услуги</tr> <tr class="separator"></tr> <tr>Цена, р</tr>
                   </th>
               <td>
                   <tr>dasdasdas</tr><tr>dasdasdas</tr>
               </td>
               <td>
                   <tr>dasdasdas</tr><tr>dasdasdas</tr>
                   </td>
            </table>

table.separator {
    width: 20px;
    height: 20px;
}

table.table_price span{
    padding: 40px 40px 40px 40px !important; 
}

Answer 1

[forspamonly2]

вы вложенность перепутали. tr снаружи, td/th внутри

Answer 2

[Роман]

1. Перепутана вложенность. Надо так:

<table class="table_price">
  <tr>
    <th>Наименовение услуги</th>
    <th>Цена</th>
  </tr>
    <tr>
    <td>Item 1</td>
    <td>Item 2</td>
  </tr>
  <tr class="separator"></tr>           <tr>
    <td>Item 1</td>
    <td>Item 2</td>
  </tr>         
</table>

2. В css поставьте пробел после table, так как в вашем случае данный стиль будет применяться только к таблице с классом separator

table .separator {
    width: 20px;
    height: 20px;
}

3. Исправьте clas на class

<table clas="table_price">