Question

我希望表格内容对齐水平和垂直的中心。我已经做到了。但我需要帮助来修复一些代码。查看下面的JSFiddle和示例代码：http://jsfiddle.net/yiedpozi/a8ZLJ/

CSS示例代码：

div.container {
    width: 500px;
    height: 200px;
}

table {
    width: 500px;
    height: 300px;
    table-layout: fixed;
}

td, tr {
    border: 1px solid red;
}

td {
    text-align: center;
    vertical-align: middle;
    padding: 20px;
}

span.description {
    display: none;
}

JS示例代码：

$('td').hover(
  function () {
        $(this).find('span.description').css({
            'display': 'block'
        });
  }, 
  function () {
        $(this).find('span.description').css({
            'display': 'none'
        });
  }
);

你可以看到，如果悬停，它会显示描述，但表格行的高度会增加。我希望它能够修复，因此，在悬停之前，标题将居中，当悬停时，所有内容都将居中，但不会影响表格内容的高度。我怎么能这样做？

Answer 1

尝试在height中设置一个td，其值可以包含默认和悬停内容。

td {
    text-align: center;
    vertical-align: middle;
    padding: 20px;
    height: 120px; 
}

JSFiddle

Answer 2

更新以下css类：

td {
    text-align: center;
    vertical-align: middle;
    padding: 20px;
    height:100px;
}

span.description {
    display: none;
    height:80px;
    overflow:auto; 
}

查看the updated JSFillde

Answer 3

你需要在div中添加一个div标签。

就像那样。

 <td>
   <div class="setHeight">
     <span class="title">This Is Title</span>
        <span class="description">Here is description. Here is description. Here is description. Here is description. Here is description.</span>
                </div>
</td>

您也可以添加setHeight类。

    div .setHeight{
    width:auto;
   height:100px;
}

http://jsfiddle.net/CodeAstro/a8ZLJ/2/

表格修复所有行的高度

3 个答案: