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

Question

我使用 CSS 技巧在 CSS table 单元格中隐藏可扩展文本上的复选框，但是，该复选框在应该隐藏时显示（请参阅图片）。下面列出了来自 FireFox 的 "view source" 代码，与写入文件的代码完全相同。摆脱复选框的任何建议？文字也没有展开，所以我觉得有问题？

<!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']。因此，如果您删除 () 并且它应该可以工作。

我还注意到您的文本在 table 单元格之一中被截断了，您可能想删除 .content class 上的 height: 15px 所以所有文字显示。

也只是一个观察，但你在 label 标签内有一个 div，据我所知，这不是好的 HTML 结构，我建议删除 label 因为它似乎没有被使用。希望对您有所帮助。

Answer 2

CSS 解决方案

省略号…

当您在 table 的内容上使用省略号时，您需要使用以下内容设置您的元素：

2 个容器 <td> 一个在外面 (.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> 成为复选框（点击它也会点击复选框）

幻灯片IN/OUT

既定行为是：

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 2状态如下：

 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，我实际上有多个单元格需要隐藏重叠，在下面的示例中有多个单元格，只有第一个单元格可以 expand/contract:

<!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 Table 单元格中的可扩展文本显示复选框

CSS Expandable Text in Table Cell is Showing Checkbox

css

expand

hidden

text

html-table

CSS 解决方案

省略号…

标签和复选框

幻灯片IN/OUT

演示