Question

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

enter image description here

表格代码：

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

Answer 1

不确定问题是什么，但是，你可以在桌子上使用你想要的任何课程。

<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表格单元格，并将剩余单元格对齐，因为它们属于同一行

1 个答案: