CSS解决方案

Question

我使用CSS技巧隐藏CSS表格单元格中可扩展文本的复选框，但是，复选框显示何时应该隐藏它（参见图片）。＆＃34;查看来源＆＃34; 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>

Answer 1

在您的代码中，您有Input()[type='checkbox']应该更改为 input[type='checkbox']。因此，如果您删除()，它应该可以正常工作。

此外，我注意到您的文字正在其中一个表格单元格中删除，您可能希望删除height: 15px类上的.content，以便显示所有文字。

同样也只是一个观察，但您在div标记内有一个label，据我所知，这不是一个好的HTML结构，我建议删除label，因为它没有＆＃39看起来好像被使用了。希望有所帮助。

Answer 2

CSS解决方案

省略号...

<小时/> 在表格内容上使用省略号时，需要使用以下内容设置元素：

<td>内的2个容器（.content），然后另一个（.hidden）将位于外容器内。文字将在.hidden。
外部容器需要以下（label.content）：
```
display: table;
table-layout: fixed;
```

内部容器需要以下（b.hidden）：

display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

标签和复选框

隐藏复选框的最佳方法是将其置于DOM中，而不是预期目标，以便级联提供控制，然后使用display:none。使用display:none复选框不会妨碍其他元素。 visibility或opacity的元素仍然存在于普通文档流中。

使用复选框但不能实际点击（用户无法看到），请使用<label for='checkboxID'>。具有复选框#id值的属性[for]允许<label>成为复选框（单击它也会单击复选框）

滑入/滑出

既定行为是：

label.content
input[type=checkbox]#chx
b.hidden第二个州被触发
label.content
input[type=checkbox]#chx现已取消选中
b.hidden恢复到第一州

b.hidden第一州如下：

 max-height: 50px;
 max-width: 200px;
 transition: .7s ease-out;

b.hidden第二州如下：

 max-height: 500px;
 max-width: 1800px;
 transition: .7s ease;
 white-space: normal;
 overflow: visible;

演示

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;
  width: 75%;
}

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;
  width: 50%;
}

label.content {
  display: table;
  table-layout: fixed;
  cursor: pointer;
}

#chx {
  display: none
}

b.hidden {
  max-height: 50px;
  max-width: 200px;
  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;
}

<!DOCTYPE html>
<html>

<body>
  <style>

  </style>

  <table class="gridtable">
    <tr>
      <th>Group</th>
      <th>Indication</th>
    </tr>
    <tr>
      <td>approved</td>
      <td>
        <input id='chx' type="checkbox" />
        <label for='chx' class="content">
      <b class="hidden">
   LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</b>
</label>
      </td>
    </tr>
  </table>
</body>

</html>

Answer 3

@Crazymatt，下面是有效的解决方案。我根据你的建议删除了（）但是必须留下标签标签，因为它没有标签标签就行不通。（请参阅此code，其中我获取了使用标签标签的示例CSS代码。）另外，我需要高度并使其为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>

Answer 4

@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>

表单元格中的CSS可扩展文本显示复选框

4 个答案:

CSS解决方案

省略号...

标签和复选框

滑入/滑出

演示