“属性”没有定义？(“properties” is not defined?)

 这个答案可能无法解决您的具体问题，但它可能会帮助其他类似场景（在大多数情况下使用表格很难呈现干净的布局。） 
 
 我之前遇到过这个问题，这就是我解决它的方法。 它基本上依赖于html嵌套的div结构来实现内容的可扩展性，而不会影响near元素的浮动布局： 
 
<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->

    <div class="sccontainer"><!--position relative-->
        <div class="inner"><!--position absolute-->
            <div class="content"><!--position relative-->
                <!-- my content here -->
            </div>
        </div> 
    </div>
    <!-- more containers etc-->

</div><!--END wrapper-->
 
 首先，我们将把臭名昭着的clear-fix hack应用于#wrapper容器（使用您首选的方法）： 
 
.cf:after {
    visibility:hidden;
    display:block;
    content:"";
    clear:both;
    height:0
}
* html .cf {
    zoom:1
}
/* IE6 */
 *:first-child+html .cf {
    zoom:1
}
 
 然后是.sccontainer容器的样式： 
 
.sccontainer {
    width: 280px; /* or whatever - could be % for responsiveness */
    padding-bottom:200px; /* any value to give height without using height ;) */
    position: relative;
    float: left;
    margin: 5px 10px; /* or whatever */
    overflow: hidden; /* this is important to keep all same height and big content out of sight */
    z-index: 1; /* this is important too, see later */
    background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}
 
 然后是.inner容器，如果我们hover元素，它实际上将有助于保持布局顺序 
 
.inner {
    position: absolute; /* please don't move */
    width: 100%; /* to fill the whole parent container */
    height: 100%; /* same */
}
 
 内容： 
 
.content {
    position: relative;
    background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
    width: 100%; /* helps to fill the gaps with small content */
    height: 100%; /* same, specially if using image backgrounds */
    /* other styles, etc */
}
 
 注意 ：我们应该将相同的border-radius属性应用于三个容器，并将box-shadow应用于.sccontainer和.content以保持一致性 
 
 现在，当我们hover时会发生什么？ 
 
.sccontainer:hover {
    overflow: visible; /* show the full content */
    z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}

.sccontainer:hover .content {
    height: auto; /* as it really is, including background image */
}
 
 注意 ：无论内容的height是否小于父容器的height都会发生这种效果。 你可能不喜欢这种效果，如果你使用边框和阴影（可以在父容器中显示为较小的框），所以我们可以添加一个额外的类到.sccontainer像 
 
<div class="sccontainer withhover">
 
 并且仅当该类存在时才应用hover效果 
 
.sccontainer.withhover:hover {
    overflow: visible;
    z-index: 999;
}
 
 ...并使用一些jQuery删除该类以获取更短的内容，因此不会受到影响： 
 
jQuery(document).ready(function ($) {
    $(".sccontainer").hover(function () {
        var $contentHeight = $(this).find(".content").height();
        if ($(this).innerHeight() > $contentHeight) {
            $(this).removeClass("withhover");
        }
    });
});
 
 请参阅JSFIDDLE 

This answer may not solve your specific problem but it may help others with a similar scenario (working with tables makes difficult to render a clean layout in most cases.)
 
I ran into this issue before and this is how I solved it. It basically relies in an html nested div structure to achieve the expandability of the content without affecting the floating layout of the near elements :
 
<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->

    <div class="sccontainer"><!--position relative-->
        <div class="inner"><!--position absolute-->
            <div class="content"><!--position relative-->
                <!-- my content here -->
            </div>
        </div> 
    </div>
    <!-- more containers etc-->

</div><!--END wrapper-->
 
First, we are going to apply the infamous clear-fix hack to the #wrapper container (use your preferred method):
 
.cf:after {
    visibility:hidden;
    display:block;
    content:"";
    clear:both;
    height:0
}
* html .cf {
    zoom:1
}
/* IE6 */
 *:first-child+html .cf {
    zoom:1
}
 
Then the style for the .sccontainer container :
 
.sccontainer {
    width: 280px; /* or whatever - could be % for responsiveness */
    padding-bottom:200px; /* any value to give height without using height ;) */
    position: relative;
    float: left;
    margin: 5px 10px; /* or whatever */
    overflow: hidden; /* this is important to keep all same height and big content out of sight */
    z-index: 1; /* this is important too, see later */
    background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}
 
Then the .inner container, which actually will help to keep the layout in order if we hover the elements
 
.inner {
    position: absolute; /* please don't move */
    width: 100%; /* to fill the whole parent container */
    height: 100%; /* same */
}
 
And the content :
 
.content {
    position: relative;
    background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
    width: 100%; /* helps to fill the gaps with small content */
    height: 100%; /* same, specially if using image backgrounds */
    /* other styles, etc */
}
 
NOTE: we should apply same border-radius properties to the three containers and box-shadow to .sccontainer and .content for consistency
 
Now, what happens when we hover ?
 
.sccontainer:hover {
    overflow: visible; /* show the full content */
    z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}

.sccontainer:hover .content {
    height: auto; /* as it really is, including background image */
}
 
NOTES : this effect will happen regardless if the content's height is smaller than the parent container's height. You may not like the effect mostly if you are using borders and shadows (could be shown as smaller box inside the parent container) so we could add an extra class to .sccontainer like 
 
<div class="sccontainer withhover">
 
and apply the hover effects only if that class exist like 
 
.sccontainer.withhover:hover {
    overflow: visible;
    z-index: 999;
}
 
... and use a bit of jQuery to remove that class for shorter content, so it won't be affected :
 
jQuery(document).ready(function ($) {
    $(".sccontainer").hover(function () {
        var $contentHeight = $(this).find(".content").height();
        if ($(this).innerHeight() > $contentHeight) {
            $(this).removeClass("withhover");
        }
    });
});
 
See JSFIDDLE