Question

我有一个具有这种结构的表

<table>
    <tr>
        <td>
            <div>
                some data 
            </div>
        </td>
        <td>
            <div>
                other data
            </div>
        </td>
    </tr>
</table>

我想让两个div的高度相同，高度将等于更高的一个如果有任何想法如何使用javascript，如找到某种方式来包含div容器中的两个div，我们将不胜感激

Answer 1

没有Javascript的唯一方法是将每个div的高度设置为100％......

然而...... 这意味着没有，因为问题就变成了，100％的是什么？

因此，您需要将固定高度添加到共享父级，以便可以计算。诀窍是给父母一个很小的高度值，以迫使它扩展到适合孩子的身高，例如：通过说，table一个height:1px

Demo Fiddle

CSS

div {
    border:1px solid red;
    height:100%;
}
table {
    height:1px;
}

HTML

<table>
    <tr>
        <td>
            <div>some data
                <br />some data
                <br />some data
                <br />
            </div>
        </td>
        <td>
            <div>other data</div>
        </td>
    </tr>
</table>

Answer 2

来吧......和FLEX一起去吧！

它很容易使用，就像魅力一样。

<div class="container">
    <div class="grid">
        Text
    </div>
    <div class="grid">
        Text<br />
        lorem ipsum dolor sit<br />
        text text
    </div>
    <div class="grid">
        Text
    </div>
    <div class="grid">
        Text
    </div>
</div>

.container { display: flex; }
.container .grid { background-color: lime; margin-right: 5px; flex: 1; }
.container .grid:last-child { margin-right: 0; }

演示：http://jsfiddle.net/SchweizerSchoggi/s8pzayep/1/

Answer 3

你可以使用边缘技巧来实现这个目标

td div {
   margin : auto;
}

更新：好吧我错了，但你可以用这个：

    <html>
<header>
<style>
    td {
        border: 1px solid black;
        width: 50%;
    }

</style>
</header>
<body>
<table>
    <tr>
        <td>
            <div>
                some data dasffffffffffffffffffffffffffffffffffffffffffffffffffffffff
            </div>
        </td>
        <td>
            <div>
                other data
            </div>
        </td>
    </tr>
</table>
</body>
</html>

Answer 4

你可以给div一个类名。所以就像

<table>
<tr>
    <td>
        <div class="table_div">
            some data 
        </div>
    </td>
    <td>
        <div class="table_div">
            other data
        </div>
    </td>
</tr>

在你的CSS部分，你可以做到这一点。

.table_div{
height:100px;// or any height you prefer
}

Answer 5

据我所知，你需要有两个相同宽度和相同高度的表数据。如果你想为表格的某些背景做这件事。你不需要为那些div设置相同的高度。例如，您可以浏览我的代码（div的高度不同）

<强> HTML

<table>
        <tr>
            <td>
                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur atque dolore ea impedit incidunt labore laboriosam libero nulla, obcaecati odio, quos rerum!</div>
            </td>
            <td>
                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur et maxime quis. Ab animi distinctio dolor ducimus eos excepturi facilis hic incidunt iste itaque iusto labore laudantium, natus, perspiciatis placeat rem temporibus ullam ut veniam vero. Accusamus autem consequatur, consequuntur delectus exercitationem id labore magnam porro, quo sed similique soluta unde ut velit voluptate. Soluta, veniam?</div>
            </td>
        </tr>
    </table>

<强> CSS

table td {
    width: 50%;
    background: #000;
    vertical-align: top;
}
table div {
    background: #000;
    color: #f00;
}

HERE fiddle

Answer 6

谢谢大家的回复这个解决方法对我有用

http://jsfiddle.net/cW9p2/

.containter {
    display: table;
    width: 100%;
    margin-bottom: 20px;
}

.cell {
    display: table-cell;
    width: 50%;
    vertical-align: top;
}
    <table>
    <thead>
        <tr>
            <th>column1</th>
            <th>column2</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">
                <div class="containter">
                    <div class="cell">
                        content 1
                    </div>
                    <div class="cell">
                        content 2
                    </div>
                </div>
                <div class="containter">
                    <div class="cell">
                        content 2
                    </div>
                    <div class="cell">
                        content 2

                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

如何在没有javascript的情况下使两个不同的div具有相同的高度

6 个答案:

Demo Fiddle