javascript - 表格行说明

table td {
  border: 1px solid black;
}

<table>
  <thead>
    <th>
      col1
    </th>
    <th>
      col2
    </th>
  </thead>
  <tbody>
    <tr>
      <td>field1</td>
      <td>field2</td>
    </tr>
    <tr>
      <td colspan="2">The above row is number 1</td>
    </tr>
    <tr>
      <td>field3</td>
      <td>field4</td>
    </tr>
    <tr>
      <td colspan="2">The above row is number 2</td>
    </tr>
  </tbody>
</table>

我想要的是？
好吧，我有这个HTML代码。
我想放置行描述，但不使用无用的TR标签。

原因：
我正在根据专栏进行排序。
列的值是integer，当我排序时，所有行描述都位于底部，而字段行则位于顶部。但行说明应附加到父行。

题：
如何附加它，以便在基于列对表进行排序后，行描述不会被破坏？

最佳答案

这不是一个了不起的解决方案，但是您可以按照以下方式尝试：

<table>
  <thead>
    <th>
      col1
    </th>
    <th>
      col2
    </th>
  </thead>
  <tbody>
    <tr>
      <td>
        field1
      </td>
      <td>field2</td>
      <td>
        <div>
          description
        </div>
      </td>
    </tr>
    <tr>
      <td>field3</td>
      <td>field4</td>
      <td>
        <div>
          description
        </div>
      </td>
    </tr>
  </tbody>
</table>

CSS：

table,
thead,
tbody,
tr {
  display: block;
  clear: both;
}

table {
  width: 130px;
}

thead {
  height: 30px;
}

th,
td {
  width: 60px;
  float: left;
  height: 30px;
  border: 1px solid black;
}

td {
  margin-top: 30px;
}

tr {
  height: 60px;
  position: relative;
}

tr td:last-child {
  width: 0;
  overflow: hidden;
  border: none;
}

div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

https://jsfiddle.net/4xbbzzg5/