CSS:td标签从表中移除,剩下一点空间

CSS:td标签从表中移除,剩下一点空间,css,google-chrome,opera,space,css-tables,Css,Google Chrome,Opera,Space,Css Tables,我一直在试着随心所欲地摆弄我的MAL CSS(我的动物主义者)。我在像chrome和opera这样的webkit浏览器中遇到过这种奇怪的行为,当我重新定位td元素时,会留下额外的空间 这就是我得到的: 我为这个项目制作了一个JSFIDLE,我基本上从我的动画列表中复制粘贴了一些html代码,并插入了我的CSS代码 所以我所做的就是从它应该的位置移除一个td元素,然后重新定位它并添加位置:固定和显示:块,这样我就可以自由地移动它。现在的问题是,当使用Chrome或Opera查看时,它在桌子位置

我一直在试着随心所欲地摆弄我的MAL CSS(我的动物主义者)。我在像chrome和opera这样的webkit浏览器中遇到过这种奇怪的行为,当我重新定位td元素时,会留下额外的空间

这就是我得到的:

我为这个项目制作了一个JSFIDLE,我基本上从我的动画列表中复制粘贴了一些html代码,并插入了我的CSS代码

所以我所做的就是从它应该的位置移除一个td元素,然后重新定位它并添加位置:固定和显示:块,这样我就可以自由地移动它。现在的问题是,当使用Chrome或Opera查看时,它在桌子位置上留下了一个空间。下面是表格行和单元格的CSS代码。(td:nth类型(6)是我重新定位的类型)


不相关-但我奇怪地发现我自己很喜欢你在这里制作的“古怪”设计?xD哈哈,谢谢,但这只是一个复制粘贴,所以我没有真正做任何事情,但css代码:D
tr [class^=td] {
    background-color: rgba(64,64,64,0);
    border-top: 1px solid rgba(255,255,255,0);
    border-bottom: 1px solid rgba(255,255,255,0);
    -webkit-transition: background-color 2s ease, border-color 1s ease;
    -moz-transition: background-color 2s ease, border-color 1s ease;
    -o-transition: background-color 2s ease, border-color 1s ease;
    transition: background-color 2s ease, border-color 1s ease;
}

tr:hover [class^=td] {
    background-color: rgba(255,255,255,0.25);
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    -webkit-transition: background-color 0.25s ease, border-color 0.25s ease;
    -moz-transition: background-color 0.25s ease, border-color 0.25s ease;
    -o-transition: background-color 0.25s ease, border-color 0.25s ease;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

tr td[class^=td] {
    padding: 5px 0;
}

/**
*
* Per-column CSS
*
**/

tr td:nth-of-type(1)[class^=td], tr td:nth-of-type(1)[class=table_header] {
    width: 4%;
    min-width: 35px;
    max-width: 100px;
    text-align: right;
    padding-right: 5px;
}

tr td:nth-of-type(2)[class^=td], tr td:nth-of-type(2)[class=table_header] {
    min-width: 400px;
    text-align: center;
}

tr td:nth-of-type(3)[class^=td], tr td:nth-of-type(3)[class=table_header],
tr td:nth-of-type(4)[class^=td], tr td:nth-of-type(4)[class=table_header],
tr td:nth-of-type(5)[class^=td], tr td:nth-of-type(5)[class=table_header],
tr td:nth-of-type(7)[class^=td], tr td:nth-of-type(7)[class=table_header],
tr td:nth-of-type(8)[class^=td], tr td:nth-of-type(8)[class=table_header],
tr td:nth-of-type(9)[class^=td], tr td:nth-of-type(9)[class=table_header],
tr td:nth-of-type(10)[class^=td], tr td:nth-of-type(10)[class=table_header] {
    width: 8%;
    min-width: 75px;
}

tr td:nth-of-type(6)[class^=td], tr td:nth-of-type(6)[class=table_header] {
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    position: fixed;
    bottom: 10px;
    left: 2%;
    width: 40%;
    opacity: 0;
    -webkit-transform: translate(0px,50px);
    -moz-transform: translate(0px,50px);
    -ms-transform: translate(0px,50px);
    transform: translate(0px,50px);
    -moz-transition: 1s ease-out;
    -webkit-transition: 1s ease-out;
    -o-transition: 1s ease-out;
    transition: 1s ease-out;

    padding: 5px 5px;
    background-color: #000;
    border: 2px solid rgba(255,255,255,0.75);
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(255,255,255,0.5);
    text-align: justify;
}

tr:hover td:nth-of-type(6)[class^=td] {
    opacity: 1;
    -webkit-transform: translate(0px,0px);
    -moz-transform: translate(0px,0px);
    -ms-transform: translate(0px,0px);
    transform: translate(0px,0px);
    -moz-transition: 0.25s ease-out 0.25s;
    -webkit-transition: 0.25s ease-out 0.25s;
    -o-transition: 0.25s ease-out 0.25s;
    transition: 0.25s ease-out 0.25s;
}