表行说明

Question

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标签。

原因： 我在列的基础上排序。 列值是整数，当我排序时，所有行描述都在底部，而字段行在顶部排序。但行描述应附加到父行。

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

Answer 1

这并不是一个惊人的解决方案，但你可以这样试试：

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