jquery - Why slideUp effect doesn't work on a div that has table-row display -

i'm using div generating table display :

<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> 

i want table-row has slideup effect doesn't work. jsfiddle describes problem better.

demo

animations not supported table rows, can use fadein() , fadeout() not animations slideup(), slidedown()

try this

i have changed css

.table-wrapper{     display:table; } .table-row{     width:200px; } .table-cell{     display:table-cell;     border:1px solid gray;     padding:5px;     width:50px; } 

here working demo of fadeout() without changing table format

hope helps,thank you