>我正在使用div生成表格显示:
<div class="table-wrapper">
<div class="table-row">
<div class="table-cell">
Id
</div>
<div class="table-cell">
Name
</div>
<div class="table-cell">
Age
</div>
</div>
<div class="table-row">
<div class="table-cell">
1
</div>
<div class="table-cell">
Joe
</div>
<div class="table-cell">
25
</div>
</div>
<div class="table-row">
<div class="table-cell">
2
</div>
<div class="table-cell">
Robbin
</div>
<div class="table-cell">
33
</div>
</div>
<div class="table-row" id="row">
<div class="table-cell">
3
</div>
<div class="table-cell">
Mark
</div>
<div class="table-cell">
62
</div>
</div>
</div>
我想我的表格行具有幻灯片效果,但它不起作用。这个jsFiddle更好地描述了我的问题。
演示
表格行不支持动画,您可以使用fadeIn()
和fadeOut()
但不能使用slideUp()
、slideDown()
试试这个
我已经更改了您的 css
.table-wrapper{
display:table;
}
.table-row{
width:200px;
}
.table-cell{
display:table-cell;
border:1px solid gray;
padding:5px;
width:50px;
}
这是在不更改表格格式的情况下fadeout()
的工作演示
希望这有帮助,谢谢
试试这个,它的工作;-D
$('.tr').click(function() {
$($(this).find('.td')).animate({padding: '0px',height: '0px',fontSize: '0px'},200);
});
div { box-sizing: border-box; }
.table {
display: table;
width: 100%;
border-style: hidden;
border-collapse: collapse;
border-right: 1px solid black;
border-left: 1px solid black;
}
.thead {
display: table-caption;
padding: 5px;
width: 100%;
border: 1px solid black;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.tr {
display: table-row;
box-shadow: inset 0px -1px 0px black; /* This simulate a Bottom-Border */
width: 100%;
}
.tr:nth-child(2n) { background: rgba(0,0,0,0.05); }
.td {
display: table-cell;
border-left: 1px solid black;
border-right: 1px solid black;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="thead">This DIV colspan="3"</div>
<div class="tr">
<div class="td" style="width: 10%;">Blah blah</div>
<div class="td" style="width: 10%;">Blah blah</div>
<div class="td">Click every row</div>
</div>
<div class="tr">
<div class="td">Blah blah</div>
<div class="td">Blah blah</div>
<div class="td">Blah blah</div>
</div>
<div class="tr">
<div class="td">Blah blah</div>
<div class="td">Blah blah</div>
<div class="td">Blah blah</div>
</div>
<div class="tr">
<div class="td">Blah blah</div>
<div class="td">Blah blah</div>
<div class="td">Blah blah</div>
</div>
</div>
斯菲德尔