Question

我有一个包含一行的表，它包含两个标记。每个td包含一个div。最初，第一个td（div）的高度更高。而第二个td的div是垂直居中的。

用户可以按下按钮，新内容将被添加到其内部的第二个td中。这将使第二个td的div具有比第一个td更高的高度。这将导致第一个td的div然后垂直居中。

如何让这两个div垂直拉伸而不是居中？

Answer 1

此行为正是您默认获得的行为。连续的所有单元格必须具有相同的高度，默认情况下，高度由行的任何单元格中的最高内容确定。

＆＃13;

document.querySelector("button").addEventListener("click", function(){
  
  var cell1 = document.getElementsByTagName("td")[0];
  var cell2 = document.getElementsByTagName("td")[1];
  
  var temp = cell1.innerHTML;
  cell1.innerHTML = cell2.innerHTML;
  cell2.innerHTML = temp;
 
});

＆＃13;

table, td { border:1px solid black; }

＆＃13;

<table>
  <tr>
    <td>I'm taller<br>than the next cell.</td>
    <td>I'm short</td>
  </tr>
</table>
<button>Swap</button>

＆＃13;

Answer 2

您可以使用jQuery轻松实现最大的相同td高度。 LiveFiddle。在评论部分向我提问。

＆＃13;

jQuery(function(){

$('.btn').click(function() {
  $('#added-text').append("<br>" + $('input[name="addtext"]').val());

});
 //You Dont need this equal height function so you can remove this part
  $("td").each(function() {
var maxHeight = 0;
  if ($(this).height() > maxHeight) {
    maxHeight = $(this).height();
  }
  $("td").height(maxHeight);
});
})

＆＃13;

tr td {
  vertical-align: top;
}

td:not(:last-child) {
  color: red;
  height: 50px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
   <table border="1">

  <tr>
<td>
  <div class="td_div">
    Content 1
  </div>
</td>
<td>
  <div class="td_div" id="added-text">
    Content 2
  </div>
</td>
  </tr>

</table>

<br>
<br>
<input type="text" name="addtext" placeholder="add some text" />
<button class="btn">
  Click to add
</button>

＆＃13;

当每个td的div具有不同的高度时，如何在td内拉伸div的高度？

2 个答案: