Question

是否有可能，无论桌面高度如何，设置#mytable的宽度，使#mytable表格50％，所以你有2个桌子并排堆叠但是它们都排列在顶部的底部因为桌子高度不同而不交错？我无法更改HTML，因此尝试使用css

<div id="mytable">
<table id="one"></table>
<table id="two"></table>
<table id="three"></table>
<table id="four"></table>
<table id="five"></table>
<table id="six"></table>
<table id="seven"></table>
<table id="eight"></table>
</div>

JsFiddle http://jsfiddle.net/BguL6/22/

在我的小提琴中你看到桌子下面的白色缝隙，可能让它们全部对齐到顶部？我尝试了veritical-align top但没有去

Answer 1

是的，你可以用CSS做到这一点。

<div id="mytable">
        <div class="column">
            <table id="one"></table>
            <table id="three"></table>
            <table id="five"></table>
            <table id="seven"></table>
        </div>

        <div class="column">

            <table id="two"></table>

            <table id="four"></table>

            <table id="six"></table>

            <table id="eight"></table>
        </div>
    </div>

和CSS：

#mytable table {
        width: 100%;
    }

    .column {
        width: 50%;
        float: left;
    }

    #mytable #one {

        height: 100px;
        background: blue;
    }

    #mytable #two {

        height: 150px;
        background: yellow;
    }

    #mytable #three {

        height: 130px;
        background: green;
    }

    #mytable #four {

        height: 110px;
        background: orange;
    }

    #mytable #five {

        height: 90px;
        background: pink;
    }

    #mytable #six {

        height: 140px;
        background: purple;
    }

    #mytable #seven {

        height: 50px;
        background: blue;
    }

    #mytable #eight {

        height: 70px;
        background: white;
    }

Js Fiddle：http://jsfiddle.net/uSPsG/

Answer 2

我设法使用javascript使用查询，它需要表有绝对位置，希望你会发现它有用：

var yTable = [ 0, 0 ];
$('#mytable').children('table').each(function (k, v) {
    //calculate x of column + #mytable x
    var x = k % 2 * $(v).width() + $(this).offset().left;
    //calculate hight of column + #mytable y
    var y = yTable[ k % 2 ]+ $(this).offset().top;

    $(v).css({left: x, top: y});

    yTable[k % 2] += $(v).height();
});

JsFiddle http://jsfiddle.net/BguL6/23/

无论垂直还是水平堆叠，如何将表对齐到顶部

2 个答案: