所有行的表格固定高度

我想让表格内容对齐水平和垂直的中心。我已经完成了。但我需要帮助来修复一些代码。看看下面这个的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' 
     }); 
    } 
);

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

来源

2014-05-20 Yiedpozi

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

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

JSFiddle

来源

2014-05-20 07:30:33 Nalaka526

作品！谢谢。：D – Yiedpozi

更新以下CSS类：

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

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

看看the updated JSFillde

来源

2014-05-20 07:33:36 Adel

作品！谢谢。：d – Yiedpozi

你需要用类的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/

来源

2014-05-20 07:38:29

所有行的表格固定高度

回答

相关问题