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

maybe it's just me, but i cannot see the difference between the webpage and the image. Could you possibly circle the differences, and possibly label them? — He Hui, Feb 20 '13 at 01:34
@HeHui The bottom of the table on the left does not align with the bottom of larger table on the right. — icanc, Feb 20 '13 at 01:37
can you put your code up? And I'm assuming that the drinkers/drink table is having dynamic height, yes? — He Hui, Feb 20 '13 at 01:41
Try giving both tables a `height` in the css. I tried `600px` for the table on the right and `580px` for the table on the left which made it align. You might need to play around with that. — icanc, Feb 20 '13 at 01:41
I have found that the problem is how different web browsers render fonts is causing slight variation in row/column/cell size — TheOne, Feb 20 '13 at 01:45
Just saw your explanation. The solution I provided could be an overkill. — He Hui, Feb 20 '13 at 02:15

score 0 · Accepted Answer · edited May 23 '17 at 12:27

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.

This is good, thank you! I have decided that the don't necessarily have to line up, as long as the Last Drinks Served tabled is longer that the Leaderboard. Take a look at what how I'm leaving as the final result.. [**link to site**](http://giblets-grave.co.uk/) — TheOne, Feb 20 '13 at 11:54
no problem :) in case you ever want to line them up, the solution is here — He Hui, Feb 20 '13 at 14:52

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

1 Answers1