HTML CSS строка таблицы перекрывается

Question

Вот код:

<div class="timetable" class="table"> 
    <table border="1"> 
     <tr class="ura"> 
      <th class="ura-ura"><span>1.1</span></th> 
      <th class="ura-predmet"><span>1.2</span></th> 
      <th class="ura-ucilnica"><span>1.3</span></th> 
     </tr> 

     <tr class="ura-nadomescanje"> 
      <th class="ura-nadomescanje-ura"><span>2.1</span></th> 
      <th class="ura-nadomescanje-predmet"><span>2.2</span></th> 
      <th class="ura-nadomescanje-ucilnica"><span>2.3</span></th> 
      <th class="ura-nadomescanje-profesor"><span>2.4</span></th> 
     </tr> 

     <tr class="ura"> 
      <th class="ura-ura"><span>3.1</span></th> 
      <th class="ura-predmet"><span>3.2</span></th> 
      <th class="ura-ucilnica"><span>3.3</span></th> 
     </tr> 

    </table> 
</div> 

и CSS (с этим кодом): http://jsfiddle.net/AV38G/10/

Я хочу иметь 3 строки в таблице, но линии с таким же классом перекрываются , Я не знаю почему.

Как я хочу: 1,1 1,2 .... 2,1 2,2 ... 3,1 3,2 ...

Но я всегда получаю: 3,1 3,2 ... 2,1 2,2 ...

Я предполагаю, что третья строка написана на первой. Но я понятия не имею, как это исправить.

Answer 1

Вот updated fiddle с рабочим HTML и CSS. Возможно, вам придется настроить несколько интервалов, но в основном это делает то, что должен был сделать другой.

Я переписал ваш html с помощью div элементов и значительно упростил ваш CSS, который был избыточным во многих местах. Вы должны стараться избегать

position: absolute; 

, где это возможно.

Answer 2

Вы должны удалить position: absolute из ваших строк классов

Answer 3

Вы Tabel имеет неправильное определение ячейки, вы должны использовать TD и TH не Вам также не нужно все стили для каждой ячейки пытается это сделать:

<table border="1"> 
     <tr class="ura"> 
      <td class="ura">1.1</td> 
      <td class="predmet">1.2</td> 
      <td class="ucilnica">1.3</td> 
      <td class="profesor"></td> 
     </tr> 
     <tr class="nadomescanje"> 
      <td class="ura">2.1</td> 
      <td class="predmet">2.2</td> 
      <td class="ucilnica">2.3</td> 
      <td class="profesor">2.4</td> 
     </tr> 
     <tr class="ura"> 
      <td class="ura">3.1</td> 
      <td class="predmet">3.2</td> 
      <td class="ucilnica">3.3</td> 
      <td class="profesor"></td> 
     </tr> 
    </table> 

С гораздо более простым стилем листом (без всех ошибок ширины)

table { 
    font-family: roboto, sans-serif; 
    width:100%; 
} 
tr { 
    width: 100%; 
    height: 70px; 
} 
td { 
    height: 70px; 
    color: #7f8c8d; 
    background-color: #ecebeb; 
    padding:5px; 
    vertical-align:middle; 
    text-align:center; 
} 
tr.ura td.ura { 
    background-color: #53ccea; 
} 
tr.nadomescanje td.ura { 
    background-color: #e74c3c; 
} 
td.ura { 
    color: #fff; 
    font-weight: lighter; 
    font-size: 2rem; 
    text-align: left; 
} 
td.ucilnica { 
    font-size: 1.2rem; 
} 
td.predmet { 
    font-weight: 600; 
    font-size: 1.5rem; 
} 
td.profesor { 
    font-weight: lighter; 
    font-style: italic; 
}