Javascript 将类的div调整为最大
我在表格单元格中有div,目标是在android设备上的每一行中都有高度相等的表格单元格,其中一些内容是包装的。经过多次尝试和错误,我能看到的唯一方法是将td内容封装在div中,然后将每个div调整为最高实例的高度。以下是我所拥有的:Javascript 将类的div调整为最大,javascript,android,jquery,html,css,Javascript,Android,Jquery,Html,Css,我在表格单元格中有div,目标是在android设备上的每一行中都有高度相等的表格单元格,其中一些内容是包装的。经过多次尝试和错误,我能看到的唯一方法是将td内容封装在div中,然后将每个div调整为最高实例的高度。以下是我所拥有的: $(document).ready(function () { var tInt = 0; $('.resizeDiv').each(function () { d = this.offsetHeight; if (d > tInt) { d
$(document).ready(function () {
var tInt = 0;
$('.resizeDiv').each(function () {
d = this.offsetHeight;
if (d > tInt) { d = tInt; }
});
$('.resizeDiv').each(function () {
this.css('height', d + 'px');
this.css('min-height', d + 'px');
this.css('display', 'block');
});
服务器端生成了许多td标签,下面是一个标准标签:
<td><div class='menuItemS resizeDiv'>8858600448</div></td>
8858600448
menuItemS只是通用样式(背景渐变),没有应用于resizeDiv类的CSS。上面的代码不起作用。有什么想法吗?我想这就是你想要的: 我通过表布局完成:固定属性 :已更新 CSS
html, body
{
margin:0%;
width:100%;
}
table
{
margin:1% 0%;
width:98%;
background:#333;
height:auto;
padding:10px 0px;
border-collapse:collapse;
table-layout:fixed;
}
.box
{
margin:0;
display:inline-block;
height:100%; /*Changed from auto to 100% */
width:100%;
background:#ddd;
}
HTML
<center>
<table border=1>
<tr>
<td>
<div class="box">
Hello <br /> Hey There... <br /> How you doing?
</div>
</td>
<td>
<div class="box">
</div>
</td>
<td>
<div class="box">
</div>
</td>
</tr>
</table>
</center>
你好
你好
你好吗?
要按高度还是按宽度?高度。当前,如果td(例如,中间列)的数据换行为两行,则单元格的高度会增加。当中间单元格的高度增加时,其他列的高度保持不变(这将显示表格的背景色)。我希望行中所有列的高度都相同查看下面的答案,看看它是否有用,如果没有,请告诉我您想要什么?@divy3993:您提供的解决方案很好,但不起作用。在jFiddle中,尝试在中间td中添加'asdf',您将看到我正在处理的内容。谢谢,现在检查更新的答案,如果仍然有任何问题,请随时询问刚离开改变高度:100%;