所有行的表格固定高度

我想讓表格內容對齊水平和垂直的中心。我已經完成了。但我需要幫助來修復一些代碼。看看下面這個的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

所有行的表格固定高度

回答

相關問題