Question

Ive been trying to create an expandable table using jquery, css and html. Ive got it working fine in firefox and IE, but Ive come across a strange issue with chrome and safari where by, using .hide() works fine but when using .show() to reveal the table again the height of the table increase each time .show() completes. Now im not sure if its a bug in chrome/safari, jquery or my CSS.

Below is a link to the code –

http://jsfiddle.net/fonzee666/CN7re/

Click on the top of the table a few times while running chrome, Ive tried it with a couple of different machines in the office and got the same result.
The version of chrome I am running is – 20.0.1132.57

My code is –

<link rel="stylesheet" type="text/css" href="test.css" />
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
        $(".headRow").click(function(){
                //alert("hello");
                //console.log("here") 
                var $divRow = $(this).nextAll(".divRow")
                if ($divRow.is(":hidden")) {
                       $divRow.show('fast');
                }
                else {
                       $divRow.hide('fast');
                }
        });

});

</script>
<p>hello</p>
</br>
<div class="divTable" id='tableuno'>
        <div class="headRow">
                <div class="divCell" align="center">VIP Name</div>
                <div  class="divCell">IP</div>
                <div  class="divCell">Ports</div>
                <div  class="divCell">Method</div>
                <div  class="divCell">Mode</div>
                <div  class="divCell">Protocol</div>
                <div  class="divCell">Graph</div>
        </div>
        <div class="divRow">
                        <div class="divCell">Rip Label</div>
                        <div class="divCell">IP</div>
                        <div class="divCell">ports</div>
                        <div class="divCell">Weight</div>
                        <div class="divCell">onlineoffline</div>
                        <div class="divCell">updownarrow</div>
                        <div class="divCell">graph</div> 
                </div>
                <div class="divRow">
                        <div class="divCell">xxx</div>
                        <div class="divCell">yyy</div>
                        <div class="divCell">www</div>
                </div>
                <div class="divRow">
                        <div class="divCell">ttt</div>
                        <div class="divCell">uuu</div>
                        <div class="divCell">Mkkk</div>
                </div>
      </div>
</br>
</body>
</html>

And the css is –

.divTable{
  display:table;         
  width:auto;         
  background-color:#eee;         
  border:1px solid  #666666;         
  border-spacing:5px;
}
.divRow{
  display:table-row;
  width:auto;
  clear:both;
 background-color:#fff;
}
.headRow:hover {
filter:Alpha(opacity=55);
//-moz-opacity:0.55;
opacity:0.55;
//border:none;
}
.headRow {
display:table-row;


}
.divCell{
  float:left;
  display:table-column;         
  width:200px;          
// background-color:#ccc;

}

Answer 1

The table is increasing in height by exactly ten pixels each time, which led me to the border-spacing: 5px property on .divTable. If you remove that, your table remains the same height each time.

However, since you probably want to keep that spacing in there, my solution would be to do away with the display: table-xxx properties entirely since you’re not exactly using them anyway. Try this:

http://jsfiddle.net/mblase75/CN7re/12/

CSS:

.divTable{
    overflow: auto;
    background-color:#eee;             
    border:1px solid  #666666;         
}
.divRow{
    overflow: auto;
    margin: 5px;
    background-color:#fff;
}
.headRow {
    overflow: auto;
    margin: 5px;
}
.divCell{
    float:left;
    width:200px;          
}

(The overflow: auto will force the divs to a non-zero height large enough for the floated divs inside of them.)

jQuery:

$("#hideshow").click(function() {
    var $divRow = $(".divRow");
    $divRow.fadeToggle('fast'); 
});​