表单元格中的CSS可展开文本正在显示复选框
表单元格中的CSS可展开文本正在显示复选框
提问于 2018-06-09 02:12:31
我使用了CSS技巧来隐藏CSS表单元格中可扩展文本的复选框，然而，复选框在应该隐藏的时候却显示出来了(见图)。下面列出了来自FireFox的“查看源代码”代码，其内容与写入文件的代码完全相同。有什么建议可以去掉这个复选框吗？文本也没有扩展，所以我认为有问题吗？
<!DOCTYPE html><html><body>
<style type="text/css">
table.gridtable {
font-family: Arial, Helvetica,sans-serif;
font-size:20px;
color: black;
border-width: 2px;
border-color: Black
border-collapse: collapse;
border-style: solid;
}
table.gridtable th {
color: Black;
border-width: 0px;
padding: 8px;
border-style: solid;
border-color: black;
background-color: #EEEEFF;
}
table.gridtable tr {
color: Black;
}
table.gridtable tr:nth-child(odd) {
background-color: #EEEEFF;
}
table.gridtable tr:nth-child(even) {
background-color: White
}
table.gridtable td {
border-width: 0px;
padding: 8px;
border-style: solid;
border-Color: #8080FF;
}
.content{
height: 15px;
width:100px;
overflow: hidden;
text-overflow: ellipsis
}
Input()[type='checkbox'] { visibility: hidden; position: absolute; }
Input()[type='checkbox']:checked + .content { height: auto; width: auto;}
</style>
<table class="gridtable" Align=center>
<tr><th>Group</th><th>Indication</th></tr>
<tr>
<td align="center">approved</td><td><label><input type ="checkbox" /><div class="content"><span class="hidden">
Indicated for the maintenance of ....
</span></div></label></td></tr>
</table></body></html>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-09 02:48:12
在您的代码中，您有应该更改为input[type='checkbox']的Input()[type='checkbox']。因此，如果您删除()，它应该可以工作。
另外，我注意到您的文本在其中一个表单元格中被截断，您可能希望删除.content类上的height: 15px，以便显示所有文本。
同样，这只是一个观察，但是在label标记中有一个div，据我所知，这不是一个好的label结构，我建议删除这个label，因为它看起来并没有被使用。希望这能有所帮助。
Stack Overflow用户
发布于 2018-06-09 07:21:22
@Crazymatt，下面是有效的解决方案。根据您的建议，我删除了()，但必须保留标签标签，因为如果没有标签标签，它将无法工作。(请参阅我获取示例CSS代码的code，它使用了标签标记。)此外，我需要的高度和它的30px。
<!DOCTYPE html><html><body>
<style type="text/css">
table.gridtable {
font-family: Arial, Helvetica,sans-serif;
font-size:20px;
color: black;
border-width: 2px;
border-color: Black
border-collapse: collapse;
border-style: solid;
}
table.gridtable th {
color: Black;
border-width: 0px;
padding: 8px;
border-style: solid;
border-color: black;
background-color: #EEEEFF;
}
table.gridtable tr {
color: Black;
}
table.gridtable tr:nth-child(odd) {
background-color: #EEEEFF;
}
table.gridtable tr:nth-child(even) {
background-color: White
}
table.gridtable td {
max-width: 100px;
overflow: hidden;
Text-overflow: ellipsis
white-Space() nowrap;
border-width: 0px;
padding: 8px;
border-style: solid;
border-Color: #8080FF;
}
.content{
height: 30px;
width: 100px;
overflow: hidden;
Text-overflow: ellipsis
}
Input[type='checkbox'] { visibility: hidden; position: absolute; }
Input[type='checkbox']:checked + .content { height: auto; width: auto;}
</style>
<table class="gridtable" Align=center>
<tr><th>Group</th><th>Indication</th></tr>
<tr>
<td align="center">approved</td><td><label><input type ="checkbox" /><div class="content"><span class="hidden">
Indicated for the maintenance ... very long text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
</span></div></label></td>
</tr>
</table></body></html>Stack Overflow用户
发布于 2018-06-09 09:50:22
@zerOOne，我实际上有多个单元格需要隐藏重叠，在下面的示例中有多个单元格，只有第一个单元格可以展开/收缩：
<!DOCTYPE html><html><body>
<style type="text/css">
table.gridtable {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: black;
border-width: 2px;
border-color: Black;
border-collapse: collapse;
border-style: solid;
}
table.gridtable th {
color: Black;
border-width: 0px;
padding: 8px;
border-style: solid;
border-color: black;
background-color: #EEEEFF;
}
table.gridtable tr {
color: Black;
}
table.gridtable tr:nth-child(odd) {
background-color: #EEEEFF;
}
table.gridtable tr:nth-child(even) {
background-color: White
}
table.gridtable td {
border-width: 0px;
padding: 8px;
border-style: solid;
border-Color: #8080FF;
}
label.content {
display: table;
table-layout: fixed;
cursor: pointer;
}
#chx {
display: none
}
.hidden {
max-height: 50px;
max-width: 100px;
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: .7s ease-out;
}
#chx:checked+.content .hidden {
max-height: 500px;
max-width: 1800px;
transition: .7s ease;
/* Remove white-space if you want the animation go horizontal */
white-space: normal;
overflow: visible;
}
</style>
<table class="gridtable">
<tr>
<th>Group</th>
<th>Indication</th>
<th>Indication</th>
<th>Indication</th>
<th>Indication</th>
</tr>
<tr>
<td>approved</td>
<td>
<input id='chx' type="checkbox" />
<label for='chx' class="content">
<div class="hidden">
LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</div>
</label>
</td>
<td>
<input id='chx' type="checkbox" />
<label for='chx' class="content">
<div class="hidden">
LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</div>
</label>
</td>
<td>
<input id='chx' type="checkbox" />
<label for='chx' class="content">
<div class="hidden">
LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</div>
</label>
</td>
<td>
<input id='chx' type="checkbox" />
<label for='chx' class="content">
<div class="hidden">
LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</div>
</label>
</td>
</tr>
</table>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50766301
复制相关文章
相似问题
腾讯云开发者
