单独隐藏/显示一些HTML表格单元格，并对齐属于同一行的其余单元格

我能解释我的问题的最好方法就是举个例子。我在下面的链接中显示了HTML jQuery表，它有一个标题（蓝色）和四行，其单元格为绿色、白色和灰色。我只希望白色和灰色单元格通过单击绿色单元格来交替隐藏/显示（toogle），绿色单元格始终作为父单元格可见。隐藏白色细胞后，绿色细胞应该排成同一行，因为它们就像俄罗斯方块一样。仅此而已，我认为更清楚的是不可能的

表格代码：

<table class="columns" cellspacing="0" border="0">
<tr>
  <td class="left" rowspan="2">
      <div style="text-align:center;"></div>    </td>
    </tr><tr><td class="middle">
    <div id="detail_table_source" style="display:none"></div>
    <p>Expanded</p>
    <table id="detail_table" class="detail">
      <colgroup>
      <col style="width:20px;">
      <col style="width:40px;">
      <col style="width:70px;">
      <col style="width:20px;">
      </colgroup>
      <thead>
        <tr bgcolor="#848FA4">
          <th width="88" bgcolor="#729ADE">Blahhh</th>
          <th width="211" bgcolor="#729ADE">BLAHH</th>
          <th width="229" bgcolor="#729ADE">BLAHH</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td bgcolor="#50C43C" class="parent" id="row456" style="cursor: pointer; " title="Click to expand/collapse"><strong>Blahh</strong></td>
          <td bgcolor="#FFFFFF" class="child-cell456">blah blah</td>
          <td bgcolor="#FFFFFF" class="child-cell456">blah blah</td>
        </tr>
        <tr>
        <td rowspan="4" valign="top" bgcolor="#5B5B5B" class="child-row456">&nbsp;</td>
          <td bgcolor="#50C43C" class="parent" id="cell456" style="cursor: pointer; " title="Click to expand/collapse">blah blah </td>
          <td bgcolor="#50C43C" class="parent" id="cell456" style="cursor: pointer; " title="Click to expand/collapse">blah blah</td>
        </tr>
        <tr>
          <td class="child-cell456">blah blah</td>
          <td class="child-cell456" >blah blah</td>
        </tr>
        <tr>
          <td class="child-cell456">blah blah</td>
          <td class="child-cell456">blah blah</td>
        </tr>
      </tbody>
    </table>    

扩大

废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话

CSS样式：

<style>
table.detail, table.detail td, table.detail th {
    border-collapse:collapse;
    border-style:solid;
    border-width:1px;
    border:1px solid #999;
    text-align:left;
    padding:.5em 1em;
}
table.detail tr.parent {
    width:6em;
    font-weight:bold;
    background:#99CC00;
    border-width:1px;
    border:1px solid #999;
    padding:2px 10px;
}
</style>

表.详图，表.详图td，表.详图th{
边界塌陷：塌陷；
边框样式：实心；
边框宽度：1px；
边框：1px实心#999；
文本对齐：左对齐；
填充物：5em 1em；
}
表1.1详细信息tr.parent{
宽度：6em；
字体大小：粗体；
背景：#99CC00；
边框宽度：1px；
边框：1px实心#999；
填充：2x10px；
}

不太确定问题是什么，但是是的，您可以在表格单元格上使用任何您喜欢的类

<table>
    <tr>
        <td class="a"></td>
        <td class="b"></td>
        <td class="c"></td>
        <td class="d"></td>
        <td class="e"></td>
    </tr>
    <tr>
        <td class="f"></td>
        <td class="g"></td>
        <td class="h"></td>
        <td class="i"></td>
        <td class="j"></td>
    </tr>
    <tr>
        <td class="k"></td>
        <td class="l"></td>
        <td class="m"></td>
        <td class="n"></td>
        <td class="o"></td>
    </tr>
</table>

请提供您的html，不清楚您需要什么。是的，这是可能的。您是否有任何尝试过的代码？如果要删除，请按问题标签下的[delete]按钮。@gamecatistoonkrij该代码已回滚。谢谢您，格罗默。我删除了这个问题，因为我想稍后再修改，因为评论和投票都说这是一个不清楚的问题，但后来我放弃了，因为太晚了。关于这个问题，我已经在标记中添加了“class”属性，使用父字符串或子字符串，但所有这些都不起作用。我只想要一个表，它的父行（总是可见的）或子行（Togleable）不是一行接一行的普通直线行，而是来自不同行的单元格组，它们的行为就像来自同一行。假设问题的公式正确，并且得到所有人的同意，我需要等待多少时间才能获得足够的选票才能重新开始我的问题？一个世纪？。什么时候会发生吗？。我甚至不能删除这篇文章，用更正的问题打开一篇新文章，因为我可能会因为重复的问题而关闭它。诚恳地说，这个网站是有史以来最无用和最烦人的帮助网站。