在此示例中，可以自动调整 <span class="orange">ORANGE</span>设置最大行高？并且有两个或更多<span>是否可以拆分单元格以调整高度？
(现在使用:显示:表格、表格行、表格单元格，但也可以使用经典表格)
<html>
<head>
<style>
.table {
display: table;
background: #eee;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid #000;
}
.cell span {
display: block;
}
.cell span.red {
background: red;
}
.cell span.yellow {
background: yellow;
}
.cell span.green {
background: green;
}
.cell span.orange {
background: orange;
}
.cell span.grey {
background: grey;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell">Header</div>
<div class="cell">Header</div>
<div class="cell">Header</div>
<div class="cell">Header</div>
</div>
<div class="row">
<div class="cell">Row 1</div>
<div class="cell">Row 1</div>
<div class="cell">Row 1</div>
<div class="cell">Row 1</div>
</div>
<div class="row">
<div class="cell">
<span class="red">RED</span>
<span class="yellow">YELLOW</span>
<span class="green">GREEN</span>
<span class="orange">ORANGE</span>
<span class="grey">GREY</span>
</div>
<div class="cell">Row 2</div>
<div class="cell">Row 2</div>
<div class="cell">
<span class="orange">ORANGE</span>
</div>
</div>
<div class="row">
<div class="cell">
<span class="red">RED</span>
<span class="yellow">YELLOW</span>
<span class="green">GREEN</span>
<span class="orange">ORANGE</span>
<span class="grey">GREY</span>
</div>
<div class="cell">Row 2</div>
<div class="cell">Row 2</div>
<div class="cell">
<span class="green">GREEN</span>
<span class="orange">ORANGE</span>
</div>
</div>
</div>
</body>
</html>
最佳答案
试试这个: http://jsfiddle.net/EjqL8/4/
$(document).ready(function(){
$(".row .cell:last-child").has("span").each(function(){
var counter = $(this).find("span").length;
var height = $(this).height() / counter;
$(this).find("span").css('height', height+'px');
});
});
关于jquery - 调整表格单元格中一个或多个 <span> 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19999265/