两个 td 标签不要并排滑动答案

【问题标题】：two td tag don't slide side by side两个 td 标签不要并排滑动
【发布时间】：2016-06-17 17:36:33
【问题描述】：

您好，我开发了一个 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 时也会发生这种情况）

【问题讨论】：

问题是，您的 TD 标签是表格的 100% 宽度。
另外td 和其他表格元素不能很好地与动画配合使用。
按照 Autista_z 所说，从 td 中删除宽度 100% css，它应该可以工作。
我删除了我所有的宽度 100% 但这不起作用...

标签： javascript jquery html css jquery-ui

【解决方案1】：

如果它稍微低一点，那么很可能是显示空格的问题。

尝试在父元素中设置line-height: 0;（我猜是tr），或者删除< /td >< td >之间的空格

【讨论】：