当一个类应用于它时,我们必须在n秒(立即)之后通过CSS隐藏一个td列;例如,以下代码段中的第2列：
<table>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
</table>
我们已经尝试使用“可见性”和“不透明度”它与div一起使用,但是使用td因为具有可见性它保持宽度它不起作用
function HideColumn() {
var el = document.getElementById('columntarget');
el.className += 'hideColumn';
}
.hideColumn {
display: none;
transition: display 2s step-end;
}
td {
width: 50px;
}
<table>
<tr>
<td style='background-color:red;'>column 1</td>
<td style='background-color:yellow;' id="columntarget">column 2</td>
<td style='background-color:blue;'>column 3</td>
</tr>
</table>
<button onclick='HideColumn()'>Hide
</button>
有什么建议吗？
编辑：
@Harry片段工作正常,但如果我们设置表格宽度会发生什么？
function HideColumn() {
var el = document.getElementById('columntarget');
el.className += 'hideColumn';
}
.hideColumn {
width: 0px;
overflow: hidden;
transition: all 2s step-end;
}
div {
width: 50px;
}
td {
padding: 0px;
}
table {
border-collapse: collapse;
}
<table style='width:500px;' border=1>
<tr>
<td>
<div style='background-color:red;'>column 1</div>
</td>
<td style='width:auto'>
<div style='background-color:blue;'>column 3</div>
</td>
<td>
<div style='background-color:yellow;' id="columntarget">column 2</div>
</td>
</tr>
</table>
<button onclick='HideColumn()'>Hide
</button>
解决方法
元素的display属性不是可转换或可动画的属性,因此对该属性值的任何更改都将立即发生,而不管通过transition属性设置的任何持续时间或延迟.
您可以通过将类设置为td的div子类,在下面的代码段中执行此操作.
笔记：
>如果你没有设置border-collapse：collapse(也就是说,边框是分开的)那么td之间的边框看起来会加倍,因为即使第二个td变为0px宽,td仍然存在所以边界仍然存在.
>默认情况下,td元素在所有四个边上都是1px填充(至少在Chrome中),这也会产生一个空格,可以通过在td上使用填充：0px来使其无效.
function HideColumn() {
var el = document.getElementById('columntarget');
el.className += 'hideColumn';
}
.hideColumn {
width: 0px;
overflow: hidden;
transition: all 2s step-end;
}
div {
width: 50px;
}
td {
padding: 0px;
}
table {
border-collapse: collapse;
}
<table>
<tr>
<td>
<div style='background-color:red;'>column 1</div>
</td>
<td>
<div style='background-color:yellow;' id="columntarget">column 2</div>
</td>
<td>
<div style='background-color:blue;'>column 3</div>
</td>
</tr>
</table>
<button onclick='HideColumn()'>Hide
</button>
我没有完全理解为表分配宽度时的问题是什么,因为td在延迟后仍然隐藏.如果您指的是其余两列扩展占据整个宽度,那么可以通过执行以下操作来解决：
>设置表格布局：固定;到桌子.
>也将宽度(等于div宽度)添加到td.
>通过JS将.hideColumn类应用于td并转换td和div的宽度.
function HideColumn() {
var el = document.getElementById('columntarget');
el.className += 'hideColumn';
}
.hideColumn > div {
width: 0px;
overflow: hidden;
transition: all 2s step-end;
}
td,div {
width: 50px;
padding: 0px;
}
.hideColumn {
width: 0px;
transition: all 2s step-end;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
<table style="width:500px;" border=1>
<tr>
<td>
<div style='background-color:red;'>column 1</div>
</td>
<td style='width:auto'>
<div style='background-color:blue;'>column 3</div>
</td>
<td id="columntarget">
<div style='background-color:yellow;'>column 2</div>
</td>
</tr>
</table>
<button onclick='HideColumn()'>Hide
</button>
