表擴大一行剛剛CSS

我有一些標記，像這樣：表擴大一行剛剛CSS

<table> 
    <thead> 
     <tr> 
      <th>Col1</th> 
      <th>Col2</th> 
     <tr> 
    </thead> 

    <tbody> 
     <tr class="main"> 
      <td>some content</td> 
      <td>some content2</td> 
     <tr> 
     <tr class="more"> 
      <td colspan="2"> 
       <div class="more-link"><a tabindex="0" href="#">Show more info</a></div> 
       <div class="more-info"> 
        more info goes here 
       </div> 
      </td> 
     <tr> 
    </tbody> 
</table>

和一些CSS：

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

.main td{ 
    height: 50px; 
    width: 300px; 
    vertical-align: top; 
} 

.main td{ 
border-bottom: 0; 
} 

.more td{ 
    border-top: 0; 
    height: 0; 
} 

.more-link{ 
    position: relative; 
    top: -30px; 
} 

.more-link:focus + div, .more-link:active + div{ 
    height: auto; 
}

我想要做的是，當「顯示詳細信息」鏈接點擊，名爲「更多」的表格行擴大。

的問題是：

有如果我設置內部more的td到具有0的高度沒有影響;
如果我將more-info div的高度設置爲0或display:none，表格行仍佔用空間。

我想用CSS來做到這一點，JavaScript可以用來使它更好，但基本應該只是沒有JavaScript的工作。

當點擊show more info鏈接時，如何才能讓我的more行擴展？

和小提琴：http://jsfiddle.net/QJr2e/

來源

2012-04-30 F21

你追不上點擊只用CSS，但你可以搭乘鼠標懸停與CSS。你可以用'：hover'css僞類來使用'height'，'overflow：hidden'，並將鼠標移到鼠標上方。 –

他是正確的.. css不會拾取點擊事件..但鼠標懸停是一個CSS事件，你可以建立起來... – Skindeep2366

我試着設置'overflow：hidden'和'height'，但那只是刪除了'顯示更多信息'鏈接，並沒有做任何改變高度。不，我們可以使用'：focus'和'：active'來捕獲「點擊」，只需像這樣的CSS：http://www.cssplay.co.uk/menus/cssplay-click-flyout.html#url – F21

知道了！

代替使用position:relative來移動「顯示更多信息」鏈接，我給它一個float:left。這允許我在使用margin的任何地方移動它，同時重新組織流程。

而不是使用height的，我只設置more-info到display:none，然後在「顯示詳細信息」鏈接被點擊：

.more-link:active + div, .more-link:focus + div{ 
    display: block; 
}

來源

2012-04-30 03:15:22 F21

表擴大一行剛剛CSS

回答

相關問題