纯 CSS HTML 表格单元格展开/折叠点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19436453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pure CSS HTML Table Cell Expand/Collapse On Click
提问by dizzy.stackoverflow
I am admittedly not at all good with CSS. I know there are similar questions and examples out there, but I haven't been able to make anything work with my example, despite plenty of trying. Your assistance is greatly appreciated.
不可否认，我对 CSS 一点也不擅长。我知道那里有类似的问题和示例，但是尽管进行了大量尝试，但我还是无法用我的示例进行任何操作。非常感谢您的帮助。
Please take a look at this fiddle: http://jsfiddle.net/4h75G/2/
请看看这个小提琴：http: //jsfiddle.net/4h75G/2/
If you hover over the "Data1,1" cell in the bottom table, it automatically expands to show the entire cell contents. However, what I would like to be able to do rather than have it expand on hover is instead be able to click one time to expand the cell, and then click a second time to contract/collapse it back to its original state. I would like to do this with only CSS and no Javascript.
如果您将鼠标悬停在底部表格中的“Data1,1”单元格上，它会自动展开以显示整个单元格内容。但是，我希望能够做而不是在悬停时展开它，而是能够单击一次以展开单元格，然后再次单击以将其收缩/折叠回其原始状态。我想只用 CSS 而没有 Javascript 来做到这一点。
Thanks!
谢谢！
HTML:
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:
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;
}
回答by tobi
You might achieve something like that without script by fiddling with hidden css-elements that can keep state (such as a checkbox), but I think you are much better off doing this by simply toggling a class in script.
通过摆弄可以保持状态的隐藏 css 元素（例如复选框），您可以在没有脚本的情况下实现类似的功能，但我认为您最好通过简单地切换脚本中的类来实现。
If you wrap you .contentin a label, prepend a checkbox and hide it like this:
如果您将您包裹.content在标签中，请在前面添加一个复选框并将其隐藏，如下所示：
input[type='checkbox'] { visibility: hidden; position: absolute; }
input[type='checkbox']:checked + .content { height: auto; width: auto;}
You can achieve what you want, but it is damn ugly. See http://jsfiddle.net/4h75G/13/for an example of this dubious practice applied to your example.
你可以实现你想要的，但它太丑了。有关适用于您的示例的这种可疑做法的示例，请参见http://jsfiddle.net/4h75G/13/。
回答by Ilya
I think you can not do it without javascript.
我认为没有 javascript 你就做不到。
With jQuery it can be made like here - http://jsfiddle.net/4h75G/12/
使用 jQuery，它可以像这里一样 - http://jsfiddle.net/4h75G/12/
$(".content").click(function(){
$(this).toggleClass('active');
});
回答by Nicoli
I am using this:
我正在使用这个：
<td><a href='#' onclick="$('#elDiv').slideToggle(200);return false;">+</a></td>
Hope this helps!
希望这可以帮助！
回答by kurt
I was looking for a more stylized approach to what you want, but was looking for a slower transitional opening and closing of TD tags. It was accomplished using JS and HTML.
我正在寻找一种更风格化的方法来满足您的需求，但正在寻找一种更慢的过渡性打开和关闭 TD 标签。它是使用 JS 和 HTML 完成的。
If you click on the green column it will open up and a click on the red closes it back. The clickable columns simply show the JS function calls.
如果您单击绿色列，它将打开，单击红色将其关闭。可点击的列只显示 JS 函数调用。
My JSFiddleexample...
我的JSFiddle示例...
HTML
HTML
<table cellpadding='0' cellspacing='0' style='width: 500px;'>
<tr>
<td colspan='3' style="background: #ddd; ">top content</td>
</tr>
<tr>
<td style="background: #fcc; vertical-align: top;"
onclick="reducer('as', 10, 50);">col1</td>
<td id='as' style="background: #cfc; vertical-align: top;"
onclick="expander(this.id, 500, 50);">col2</td>
<td style="background: #ccf; width:200px;">col3</td>
</tr>
<tr>
<td colspan='3' style="background: #ddd; ">bottom content</td>
</tr>
</table>
JS
JS
function expander(id, maxheight, time) {
var slice = document.getElementById(id);
var height = Number(slice.style.height.replace('px', ''));
var expandRate = maxheight / time;
var i = 0;
var timer = setInterval(function () {
height = height + expandRate;
if (i < time) {
i++;
slice.style.height = height + 'px';
} else {
clearInterval(timer);
}
}, 1);
}
function reducer(id, minHeight, time) {
var slice = document.getElementById(id);
var height = Number(slice.style.height.replace('px', ''));
var collapseRate = Math.abs(height - minHeight) / time;
var i = 0;
var timer = setInterval(function () {
height = height - collapseRate;
if (i < time) {
i++;
slice.style.height = height + 'px';
} else {
clearInterval(timer);
}
}, 1);
}
