表扩大一行刚刚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

回答

相关问题