Question

我正在尝试使用这样的表：

但是在下面这饮料将在该td内再排一行：像这样：

level 1 
  -- level 2
     -- level 3

具有相同的列数。

<tr>
    <td>Alfreds Futterkiste</td>
    <td>
       <table>
         <tr>
            <td>
               aaaaa
                  <table>
                     <tr>
                         <td>
                             aaaaa

                        </td>
                    </tr>
                </table>
            </td>
         </tr>
       </table>
    </td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>

Answer 1

表由行中的列构成。构造表时，<td>的水平移动和<tr>的垂直移动。设置代码的方式，所有操作都在第一行中进行，因此一切都将与代码本身内联。

与其将这种布局视为嵌套表，不如将其视为缩进行。

代码如下：

body {
  font-family: "Helvetica", sans-serif;
  margin: 0;
}

th,
td {
  border-top: solid 1px #ededed;
  text-align: left;
}

.first-row th,
.first-row td {
  border: none;
}

.spacer {
  background-color: #ededed;
}

input {
  border: solid 1px #ccc;
  padding: .25em;
}

input:disabled {
  background-color: #ededed;
}

<table cellspacing="0" cellpadding="15">
  <tbody>
    <tr class="first-row">
      <th colspan="3">&#8595; Alfreds Futterkiste</th>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" disabled></td>
    </tr>
    <tr class="second-row">
      <td class="spacer"></td>
      <th colspan="2">&#8595; Level 2</th>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" disabled></td>
    </tr>
    <tr class="third-row">
      <td class="spacer"></td>
      <td class="spacer"></td>
      <th>&#8595; Level 3</th>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" disabled></td>
    </tr>
    <tr class="fourth-row">
      <th colspan="3">&#8595; Maria Anders</th>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" disabled></td>
    </tr>
    <tr class="fifth-row">
      <th colspan="3">&#8595; Germany</th>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" disabled></td>
    </tr>
  </tbody>
</table>

我们没有嵌套新表，而是通过添加空表单元格来缩进子行。

Answer 2

这是对已发布内容的另一种选择，但使用不同的CSS类来控制缩进级别。另外，由于看起来您正在使用下拉菜单进行操作，因此我提供了一个简单示例来说明如何使用jQuery。还值得注意的是，表中具有多个“ tbody”元素是完全有效的，这是对顶级类别进行分组的有用方法。

$('.level-two').click(function() {
    // Get the data attribute
    var group = $(this).attr('data-group')
    // Get all elements with that class
    $('.'+group).each(function(){
        $(this).fadeToggle()
    });
});

.level-three {
    display: none;
}
.level-two td:first-child {
    padding-left: 20px;
}
.level-three td:first-child {
    padding-left: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <!-- Top Level group -->
  <tbody>
      <tr class="level-one">
          <td>Products</td>
          <td>0</td>
      </tr>

      <tr class="level-two" data-group="beverages">
          <td>Beverages</td>
          <td>0</td>
      </tr>
      <tr class="beverages level-three">
          <td>Water</td>
          <td>0</td>
      </tr>
      <tr class="beverages level-three">
          <td>Tea</td>
          <td>0</td>
      </tr>

      <tr class="level-two" data-group="sandwiches">
          <td>Sandwiches</td>
          <td>0</td>
      </tr>
      <tr class="sandwiches level-three">
          <td>Italian</td>
          <td>0</td>
      </tr>
  </tbody>
  <!-- Another top level group -->
  <tbody>
      <tr class="level-one">
          <td>Foobars</td>
      </tr>
  </tbody>

</table>

如何在表中创建三级行？

2 个答案: