Question

我正在尝试制作两张独立的桌子来回应饮酒者的饮酒结果。

这些表使用nth-child（奇数），nth-child（偶数）交替背景，工作正常..它只是让它们通过不同的浏览器对齐并获得圆角。

我尝试过使用nth-last-child（1）..等但仍然没有整洁的解决方案。

这是我到目前为止的地方.. http://giblets-grave.co.uk/index3.php

这就是它的样子： http://giblets-grave.co.uk/img/1400x900_GG-desktop_design_final.jpg

在/css/main2.css

查看我当前的css

Answer 1

我没有看到你的代码，但我嘲笑了类似的情况。

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

如您所见，第二个表的高度是“动态的”，它可能比第一个表长，无所谓。

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

到目前为止，你所拥有的是跟随#second高度的#first父级。 Reference

Fiddle

那么现在呢？ #first跟随#second的高度，但#first_child不遵循#first的高度。但是，HTML表格并不遵循父母div的高度。 Reference

答案：Javascripts。

首先要检测#second的高度，然后自动调整#first_child的高度以跟随#second的高度。

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

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

<强> Solution

希望这是你正在寻找的。

Css表格样式，nth-child，border-radius＆amp;跨浏览器支持

1 个答案: