2つのtdタグが横に並んでいません

Question

こんにちは私は、tdが現れ、並んでいなくなるアプリを開発します。

lastInsertTd = 0; 
 
function newSlidingTd() { 
 
    tr = jQuery('#myline'); 
 
    var lastTd = jQuery('#myline').children().last(); 
 

 
    td = jQuery("<td></td>") 
 
     .attr('id', 'slidingTd' + lastInsertTd+1) 
 
     .attr('style', 'display:none;vertical-align:top;width:100%'); 
 
    tr.append(td); 
 
    tdSuivant = jQuery('#slidingTd' + lastInsertTd+1); 
 
    tdActuel = jQuery('#slidingTd' + lastInsertTd); 
 

 
    /*animation*/ 
 
    tdActuel.toggle('slide', { 
 
     direction: 'left' 
 
    }, 500); 
 
    tdSuivant.toggle('slide', { 
 
     direction: 'right' 
 
    }, 500); 
 
lastInsertTd = lastInsertTd+1; 
 
}

table { 
 
    width:100px 
 
} 
 
td { 
 
    border: black solid 1px; 
 
    width:100% 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<table> 
 
    <tr id="myline"> 
 
    <td id='slidingTd0' onclick="newSlidingTd()"> 
 
     1 
 
    </td> 
 
    </tr> 
 
</table>

しかし、私は私のイベントを呼び出すときに、私の新しいtdは右が、少し下からスライドしません。この "バグ"をどうやって解決できますか？ （これはtd内でdivを作成したときにも発生します）

Answer 1

若干低い場合は空白を表示するのが問題です。

親要素（私は推測するだろうtr）でline-height: 0;を設定してみてください、または</td><td>