纯 CSS HTML 表格单元格在单击时展开/折叠

Question

诚然，我对 CSS 一点也不擅长。我知道那里有类似的问题和例子，但尽管我做了很多尝试，但我还是无法用我的例子做任何事情。非常感谢您的协助。

请看看这个小提琴：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;
    }

原文由 dizzy.stackoverflow 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可能会在没有脚本的情况下通过摆弄可以保持状态的隐藏 css 元素（例如复选框）来实现类似的东西，但我认为你最好通过简单地切换脚本中的类来做到这一点。

如果您将 .content 包装在标签中，请在前面添加一个复选框并将其隐藏，如下所示：

 input[type='checkbox'] { visibility: hidden; position: absolute; }
input[type='checkbox']:checked + .content { height: auto; width: auto;}

你可以实现你想要的，但这太丑陋了。请参阅 http://jsfiddle.net/4h75G/13/ 以获取适用于您的示例的这种可疑做法的示例。

原文由 tobi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

见

 td,
th {
  padding: 2px 2px 2px 2px;
  border: 1px solid #BBB;
}

.first-col {
  border-width: 0;
  max-width: 10px;
  border-color: red !important;
}

.first-row {
  border-color: LIGHTGREEN;
}

.first-row td {
  border-color: blue;
  width: 70px;
}

.content {
  display: none
}

.content:hover {
  color: red;
  outline: thin solid;
  cursor: cell;
}

.header {
  text-align: center;
  font-weight: bolder;
  font-size: 20px;
}

label:hover {
  cursor: cell
}

input[type='checkbox'] {
  display: none
}

input[type='checkbox']:checked+.content {
  display: block
}

 <table>

  <tr>
    <td class=first-row>
      <table>
        <tr class=header>
          <td class="first-col "></td>
          <td>Col-1</td>
          <td>Col-2</td>
          <td>Col-3</td>
          <td>Col-4</td>
          <td>Col-5</td>
        </tr>
      </table>
    </td>
  </tr>

  <tr>
    <td class=first-row>
      <table>
        <tr>
          <td class="first-col"><label for=v01>+</label></td>
          <td>Data1</td>
          <td>Data2</td>
          <td>Data3</td>
          <td>Data4</td>
          <td>Data5</td>
        </tr>
      </table>

      <input id=v01 type=checkbox />
      <table class=content>
        <tr>
          <td class="first-col"> - </td>
          <td>Data1</td>
          <td>Data2</td>
          <td>Data3</td>
          <td>Data4</td>
          <td>Data5</td>
        </tr>
        <tr>
          <td class="first-col"> - </td>
          <td>Data1</td>
          <td>Data2</td>
          <td>Data3</td>
          <td>Data4</td>
          <td>Data5</td>
        </tr>
        <tr>
          <td class="first-col"> - </td>
          <td>Data1</td>
          <td>Data2</td>
          <td>Data3</td>
          <td>Data4</td>
          <td>Data5</td>
        </tr>
      </table>

    </td>
  </tr>

  <tr>
    <td class=first-row>
      <table>
        <tr>
          <td class="first-col"></td>
          <td>Data1</td>
          <td>Data2</td>
          <td>Data3</td>
          <td>Data4</td>
          <td>Data5</td>
        </tr>
      </table>
    </td>
  </tr>

  <tr>
    <td class=first-row>
      <table>
        <tr>
          <td class="first-col"><label for=v02>+</label></td>
          <td>Data1</td>
          <td>Data2</td>
          <td>Data3</td>
          <td>Data4</td>
          <td>Data5</td>
        </tr>
      </table>

      <input id=v02 type=checkbox />
      <table class=content>
        <tr>
          <td class="first-col"> - </td>
          <td>Data1</td>
          <td>Data2</td>
          <td>Data3</td>
          <td>Data4</td>
          <td>Data5</td>
        </tr>
      </table>

    </td>
  </tr>

</table>

用于带有表格复选框的 HTMl 解决方案。关键是在 td 中使用另一个表。

原文由 Bashir Momen 发布，翻译遵循 CC BY-SA 4.0 许可协议