Reputation: 161

HTML CSS table lines overlaps

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.

Upvotes: 0

Answers (3)

Code Uniquely

Reputation: 6373

You tabel has the wrong cell definition you should use TD and not TH You also don't need all of the styles for each cell try doing this:

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

With a much simpler style sheet of (without all the width errors)

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

Upvotes: 0