錶行說明

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/