Css table styles, nth-child, border-radius & Cross browser support

Question

I'm trying to make 2 separate tables to echo results of drinkers and their drinks from a bar.

The tables have alternating backgrounds using nth-child(odd), nth-child(even) which is working fine.. its just getting them to align through different browsers and getting rounded corners.

I've tried using nth-last-child(1)..etc but still no tidy solution.

Here's where I'm at so far.. http://giblets-grave.co.uk/index3.php

and this is what its ment to look like: http://giblets-grave.co.uk/img/1400x900_GG-desktop_design_final.jpg

Take a look at my current css at /css/main2.css

Answer 1

I've not seen your code, but I mocked up a similar scenario.

HTML

<div id="main">
    <div id="first">
        <table>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
        </table>
    </div>
    <div id="second">
        <table>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
        </table>
    </div>
</div>

As you can see, the height of the second table is "dynamic", and it could be longer than the first table, doesnt matter.

The CSS

#main {
    width:500px;
    overflow:hidden;
}
#first, #second {
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    float: left;
}
#first {
    float:left;
    width:100px;
    overflow:auto;
}
#second {
    width:400px;
    float:left;
}

Thus far, what you have is the #first parent to follow the height of the #second. Reference

Fiddle

So what now? The #first follows the height of the #second, but the #first_child does not follow the height of #first. However, HTML tables does not follow parents div's heights. Reference

Answer: Javascripts.

You first want to detect the height of the #second, and then auto adjust the height of the #first_child to follow the height of the #second.

var second_height = $("#second").height();
var table_height = second_height;

$("#first_child").height(table_height);

Solution

Hope this is what you're looking for.