不可见元素占用空间,不能改变表格单元的高度

时间:2017-10-30 20:41:25

标签: javascript html css

我有一个包含多行的表格。您可以找到表格Here

从下拉列表和表格中选择任何项目。

该表显示每行一个团队。如果球队已经参加比赛,那么比赛的结果可以在非常正确的单元格中看到。如果匹配尚未播放,则会有一个按钮,在该行下方会有一个隐藏的行,在单击该按钮后会出现。

我对此表有两个问题

  

1)隐藏行的团队比其他团队更高。但无论如何我无法改变他们的身高。

     

2)对于有隐藏行的团队,团队之间的差距会大1px。问题是由tr元素引起的。但它没有大小和   边界,为什么要占用空间?我可以将其显示设置为   没有,然后拿走它,但然后它打破了我的动画。

这两个问题都与隐藏行有关,所以我认为这就是原因。但我真的不知道如何解决它。

使用此js:

完成展开/折叠
    if (this.dialogHidden) {
        this.enterDialog.css('height', '75px');
        this.enterDialog.css('border-style', 'solid');
        this.dialogHidden = false;
    }
    else {
        this.enterDialog.css('height', '0px');
        this.enterDialog.css('border-style', 'none');
        this.dialogHidden = true;
    }

展开/折叠enterDialog元素的动画正在使用转换(参见下面的css代码):

.enterDialog {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    border: none 1px #FB667A;
    -moz-transition: height .5s;
    -ms-transition: height .5s;
    -o-transition: height .5s;
    -webkit-transition: height .5s;
    transition: height .5s;
    height: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

1 个答案:

答案 0 :(得分:1)

  1. 具有隐藏行的团队具有更高的高度,因为“输入结果”具有2%的填充设置。将以下内容添加到“foosball.css”:

    .tdButton { padding-top: 0!important; padding-bottom: 0!important; }

  2. 隐藏行的团队间隙较大,因为 dummy TR实际上并未隐藏。将以下内容添加到'foosball.css':

    tr.dummy{ display: none; }

  3. 在enterResult.js第157行中,更改此内容:

    if (this.dialogHidden) {
        // this.tr.removeClass('hidden');
        this.enterDialog.css('height', '75px');
        this.enterDialog.css('border-style', 'solid');
        this.dialogHidden = false;
    }
    else {
        // this.tr.addClass('hidden');
        this.enterDialog.css('height', '0px');
        this.enterDialog.css('border-style', 'none');
        this.dialogHidden = true;
    }
    

    到此:

    if (this.dialogHidden) {
        // this.tr.removeClass('hidden');
        this.tr.css("display", "table-row");
        this.enterDialog.css('height', '75px');
        this.enterDialog.css('border-style', 'solid');
        this.dialogHidden = false;
    }
    else {
        // this.tr.addClass('hidden');
        this.tr.css("display", "none");
        this.enterDialog.css('height', '0px');
        this.enterDialog.css('border-style', 'none');
        this.dialogHidden = true;
    }
    

    请注意,您将丢失行扩展动画。但是如果你使用JQuery,动画可以添加到一行。

    要添加动画,请将Jquery包含到您的页面,然后在enterResult.js第157行中,替换为:

    this.tr.css("display", "table-row");
    

    由此:

    $(this.dom).find("tr.dummy").slideDown();
    

    和此:

    this.tr.css("display", "none");
    

    由此:

    $(this.dom).find("tr.dummy").slideUp();
    

    这应该会带回动画。