我有许多有很多行的表。我想最初只显示前三个表格行。当用户单击“显示/隐藏”链接时,将切换所有隐藏的行。到目前为止,我已经使用 CSS3 和 JavaScript 实现了这一点(请参阅 Fiddle)。
CSS(默认只显示三行):
.hide tr:nth-child(n+4) {
display:none;
}
JavaScript(在类上方切换以显示所有行):
function ShowHide() {
var tables = document.getElementsByClassName('foo');
for(i=0; i<tables.length; i++) {
tables[i].classList.toggle("hide");
}
}
是否可以使用transition
CSS3的功能使行缓慢显示,而不是立即显示?例如,淡入/淡出超过 2 秒?
我知道这可以在 JQuery 中轻松完成,但我正在寻找纯 CSS 解决方案。
最好的方法确实是玩高度和不透明度。但是你不能在表格元素上设置高度 (tr/td)
所以这是一个关于如何只使用 CSS 的例子
#expand {
/* hide the checkbox */
display: none
}
label {
/* style as a button (you can't use button inside label with for attribute) */
padding: 2px 5px;
border: 1px solid rgba(0,0,0,.2);
border-radius: 5px;
font-size: .7rem;
cursor: pointer;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
table tr:nth-child(n+4)>td {
padding: 0;
}
table tr:nth-child(n+4)>td>div {
opacity: 0;
max-height: 0;
transition: all 250ms ease-in;
}
#expand:checked + table tr:nth-child(n+4)>td {
padding: 1px;
/* default */
}
#expand:checked + table tr:nth-child(n+4)>td>div {
opacity: 1;
/* try to use something just slightly above the true height */
max-height: 20px;
overflow: hidden;
transition-timing-function: ease-out;
}
<input type="checkbox" id="expand"/>
<table id="table">
<tbody>
<tr>
<td>
<div>Row 1</div>
</td>
</tr>
<tr>
<td>
<div>Row 2</div>
</td>
</tr>
<tr>
<td>
<div>Row 3</div>
</td>
</tr>
<tr>
<td>
<div>Row 4</div>
</td>
</tr>
<tr>
<td>
<div>Row 5</div>
</td>
</tr>
<tr>
<td>
<div>Row 6</div>
</td>
</tr>
<tr>
<td>
<div>Row 7</div>
</td>
</tr>
<tr>
<td>
<div>Row 8</div>
</td>
</tr>
<tr>
<td>
<div>Row 9</div>
</td>
</tr>
<tr>
<td>
<div>Row 10</div>
</td>
</tr>
</tbody>
</table>
<br/>
<label for="expand">Toggle</label>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句