诚然,我对 CSS 一点也不擅长。我知道那里有类似的问题和例子,但尽管我做了很多尝试,但我还是无法用我的例子做任何事情。非常感谢您的协助。
请看一下这个 fiddle :http://jsfiddle.net/4h75G/2/
如果将鼠标悬停在底部表格中的“Data1,1”单元格上,它会自动展开以显示整个单元格内容。但是,我希望能够做的不是让它在悬停时展开,而是能够单击一次以展开单元格,然后再次单击以将其收缩/折叠回其原始状态。我想只用 CSS 而不用 Javascript 来做到这一点。
谢谢!
HTML:
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr>
<td>Data1,1</td>
<td>Data2,1</td>
<td>Data3,1</td>
</tr>
<tr>
<td>Data1,2</td>
<td>Data2,2</td>
<td>Data3,2</td>
</tr>
<tr>
<td>Data1,3</td>
<td>Data2,3</td>
<td>Data3,3</td>
</tr>
</table>
</br>
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr>
<td><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
<br/>Data1,1 second line - this is a kind-of long line too
<br/>Data1,1 third line
<br/>Data1,1 fourth line</span>
</div>
</td>
<td>Data2,1</td>
<td>Data3,1</td>
</tr>
<tr>
<td>Data1,2</td>
<td>Data2,2</td>
<td>Data3,2</td>
</tr>
<tr>
<td>Data1,3</td>
<td>Data2,3</td>
<td>Data3,3</td>
</tr>
</table>
CSS:
body,table{
font-family:verdana,arial,sans-serif;
font-size:12px;
border-collapse:collapse;
}
td,th{
padding:3px 3px;
margin:0px;
border:1px solid #BBB;
white-space:nowrap;
}
.content{
height:15px;
width:100px;
overflow:hidden;
text-overflow:ellipsis
}
.content:hover{
height:auto;
width:auto;
}
最佳答案
你可以在没有脚本的情况下通过摆弄可以保持状态的隐藏 css 元素(例如复选框)来实现类似的东西,但我认为你最好通过简单地切换脚本中的类来做到这一点。
如果您将 .content
包装在标签中,请在前面添加一个复选框并将其隐藏,如下所示:
input[type='checkbox'] { visibility: hidden; position: absolute; }
input[type='checkbox']:checked + .content { height: auto; width: auto;}
你可以实现你想要的,但它太丑了。参见 http://jsfiddle.net/4h75G/13/有关将这种可疑做法应用于您的示例的示例。
关于html - 纯 CSS HTML 表格单元格在单击时展开/折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19436453/