javascript - 所有行的表格固定高度

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

尝试将 td 中的 height 设置为可以容纳默认内容和悬停内容的值。

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

JSFiddle