-3

我可以解释我的问题的最好方法是展示一个例子。我在下面的链接中显示了 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>
4

1 回答 1

2

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

<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>
于 2012-09-25T20:39:40.820 回答