表の行説明

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/