Question

我正在努力＆＃34;动态＆＃34;将每个div的高度更新为等于其行父级

我有这个非常简单的代码，可以在所有行中完成工作。所以我最终想要的是将所有td divs设置为整个表格中最大的值，这是我不想要的。

我想要的是，在同一行内设置所有高度的div

有什么建议吗？

function setdivHeights() {
    var maxHeight = -1;
    $('tbody tr td div:last-child').each(function() {
        if ($(this).height() > maxHeight) {
            maxHeight = $(this).height();
        }
    });
    $('tbody td div:last-child').height(maxHeight);
    $('tbody td div:last-child').addClass('cell');
}

这是我的html代码的简化示例：

<table class="tablesorter" id="list">
    <thead></thead>
    <tbody>
        <tr>
            <td><div>1</div></td>
            <td><div>2</div></td>
            <td><div>3</div></td>
            <td><div>4</div></td>
        </tr>
        <tr>
            <td><div>a</div></td>
            <td><div>b</div></td>
            <td><div>c</div></td>
            <td><div>d</div></td>
        </tr>
    </tbody>
</table>

Answer 1

只需按行执行，而不是选择器中的所有行：

function setdivHeights() {
    trs = $('tbody tr');
    trs.each(function(){
        var maxHeight = -1;
        $(this).find('td div:last-child').each(function() {
            if ($(this).height() > maxHeight) {
                maxHeight = $(this).height();
            }
        }).height(maxHeight).addClass('cell')
    }) 
}

Answer 2

嗨我不知道我是否理解你，但如果你在td上有一个高度和宽度，你可以简单地用css给予潜水高度和宽度100％并且应该填充它。红色边框是td的尺寸，蓝色框是填充的div ...我认为这样的解决方案不需要JS，因为当你给css 100％的高度时，它需要它的值父元素，在这个例子中，div将占用他父母的20px，td，然后填充它。如果我不明白你的问题，而不是抱歉：）

.tablesorter tbody tr td {
  height: 20px;
  width: 70px;
  border: 2px solid red;
}

.tablesorter tbody tr td div {
  height: 100%;
  width: 100%;
  background-color: blue;
}

<table class="tablesorter" id="list">
    <thead></thead>
    <tbody>
        <tr>
            <td><div>1</div></td>
            <td><div>2</div></td>
            <td><div>3</div></td>
            <td><div>4</div></td>
        </tr>
        <tr>
            <td><div>a</div></td>
            <td><div>b</div></td>
            <td><div>c</div></td>
            <td><div>d</div></td>
        </tr>
    </tbody>
</table>

Answer 3

尝试使用border-collapse: collapse和border-spacing: 0

table {
  width: 200px;
  border-collapse: collapse;
  border-spacing: 0;

}
tr td {
  padding: 0;
  width: 70px;
  height: 50px;

}
tr td div {
  width: 100%;
  height: 100%;
  background-color: green;
}

动态设置表格单元格子行高度为行高的100％

3 个答案: