各tdのdivの高さが異なる場合、div内のdivの高さをtd内で伸ばす方法はありますか？

-1

私は1つの行と2つのタグを含むテーブルがあります。各tdにはdivが含まれています。最初は最初のtd（div）の高さが高くなります。そして、第2のtdのdivは垂直方向の中央に置かれます。各tdのdivの高さが異なる場合、div内のdivの高さをtd内で伸ばす方法はありますか？

ユーザーはボタンを押すことができ、新しいコンテンツはdiv内の2番目のIDに追加されます。これは、第2のtdのdivが第1のtdよりも大きい高さを有するようにする。これにより、最初のtdのdivが垂直に中央揃えされます。

これらのdivの両方を中央ではなく縦に引き伸ばすにはどうすればよいですか？

出典

2016-12-09 ashlar64

この現象は、デフォルトで取得正確に何です。行内のすべてのセルは同じ高さでなければならず、デフォルトではその高さは行内のセルの中で最も高いコンテンツによって決まります。 –

同じ ''内のすべての ''要素は、これを無効にする試みにかかわらず、自動的に同じ高さを共有します。 '

'全体のすべての要素が同じ高さになるようにする必要がありますか？いずれにせよ、あなたはあなたの "* [MCVE] *"コードを表示し、自分の試みが失敗した方法を説明する必要があります。 –

あなたは何を試しましたか？それがテーブルのデフォルト動作です。 –

答えて

この動作は、デフォルトで取得する動作とまったく同じです。行内のすべてのセルは同じ高さでなければならず、デフォルトでは高さは行内のセルの中で最も高い内容で決まります。

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; 
 
    
 
});

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

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

出典

2016-12-09 19:01:12

あなたは最大で同じTDの高さのためにそれを容易にするためにjQueryのを使用することができます。 LiveFiddle。コメント欄に質問してください。

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); 
 
}); 
 
})

tr td { 
 
    vertical-align: top; 
 
} 
 

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

<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>

出典

2016-12-09 19:14:11

これは素敵なコードですが、OPが言っているシナリオには触れません。 –

各tdのdivの高さが異なる場合、div内のdivの高さをtd内で伸ばす方法はありますか？

答えて

関連する問題