调整 <tr> 大小时无法使溢出工作

Question

所以基本上我正在开发一个 table 可以用漂亮的动画处理它的行。问题是我无法将行缩小到超出其大小小于其内容大小的位置。一旦收缩动画达到文本的高度（我正在垂直收缩），它就会停止。当然，我也在 Google 和 Stack Overflow 上寻找答案，并找到了很多，但我尝试了所有这些都没有成功。我尝试在 CSS 中编写 overflow: hidden;，以及所有其他声称可以解决此问题的内容。

Here 是我的工作示例（很抱歉没有在此处显示代码，但是仅 link 工作和 editable 示例更容易）。单击按钮创建一个新的 table，然后单击行使其消失。

我知道这个问题以前在其他地方已经回答过，但这些解决方案似乎对我不起作用。

有什么想法吗？我希望被点击的行在被删除之前完全收缩。

PS.: 对不起，如果我是愚蠢的，我是网络开发的新手。

PS2.: 没有jQuery请。

Answer 1

您必须像这样更新/更改行高

https://jsfiddle.net/9hznp00s/12/

function deleteRow(id) {
    if (typeof (id) === 'undefined') return;

    var element = document.getElementById(id);

    // Set the row's height and opacity to 0 (the changes are animated by the CSS)

    // I commented this out so it's easier to see the collapse effect
    //element.style.opacity = 0;

    element.style.height = '0px';
    element.style.maxHeight = '0px';
    element.style.lineHeight = '0px';
    element.style.opacity=0.0;

    // After the animation is done, remove the row form the HTML
    setTimeout(function () {
        element.innerHTML = '';
        element.parentNode.removeChild(element);
    }, 500);
}

或尝试其中之一
https://jsfiddle.net/9hznp00s/8/

function deleteRow(id) {
    if (typeof (id) === 'undefined') return;

    var element = document.getElementById(id);

    // Set the row's height and opacity to 0 (the changes are animated by the CSS)

    // I commented this out so it's easier to see the collapse effect
    //element.style.opacity = 0;

    element.style.height = '0px';
    element.style.maxHeight = '0px';
    element.style.fontSize = '0px';

    // After the animation is done, remove the row form the HTML
    setTimeout(function () {
        element.innerHTML = '';
        element.parentNode.removeChild(element);
    }, 500);
}

https://jsfiddle.net/9hznp00s/10/

function deleteRow(id) {
    if (typeof (id) === 'undefined') return;

    var element = document.getElementById(id);

    // Set the row's height and opacity to 0 (the changes are animated by the CSS)

    // I commented this out so it's easier to see the collapse effect
    //element.style.opacity = 0;

    element.style.height = '0px';
    element.style.maxHeight = '0px';
    element.style.fontSize = '0px';
    element.style.opacity=0.0;

    // After the animation is done, remove the row form the HTML
    setTimeout(function () {
        element.innerHTML = '';
        element.parentNode.removeChild(element);
    }, 500);
}

调整 <tr> 大小时无法使溢出工作

Can't get overflow to work when resizing a <tr>

html

javascript

css

overflow