HTML CSS table lines overlaps

Question

Here is the code:

<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>

And CSS (with these code): http://jsfiddle.net/AV38G/10/

I want to have 3 lines in table, but lines with same class is overlapped. I don't know why.

How I want: 1.1 1.2.... 2.1 2.2... 3.1 3.2...

But I always get: 3.1 3.2... 2.1 2.2...

I guess that the third line is written on the first one. But I have no idea how to fix it.

Answer 1

Here is an updated fiddle with working HTML and CSS. You may have to tweak some spacing, but it basically does what the other one was supposed to.

I rewrote your html using div elements, and greatly simplified your CSS, which was redundant in many places. You should try to avoid

position: absolute;

where possible.