使用css與html表，是否有可能讓第一列懸浮在所有行的剩餘列之上？

Question

我在一個網站中有大量表格，大多數數據集的第一列有時包含大字符串（例如產品名稱），而其餘列包含小數字。截斷不是一個選項，是否有一個簡單而乾淨的方式與CSS讓表中的第一列'浮動'在其他列之上，就好像它正在執行colspan？

我是這樣想的腳本表（或如何，它已經編寫）：

<table class="table-foldingfirstcolumn"> 
    <thead> 
    <tr> 
     <th>First Column</th> 
     <th>Second Column</th> 
     <th>Third Column</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Very long first column that should float on top of other columns</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    </tbody> 
</table> 

下面是它的輸出（這是不期望的輸出）：

 
====================================================== 
First Column | Second Column | Third Column 
====================================================== 
Very long first   1     2 
column that 
should float on 
top of other 
columns 

下面是所需的輸出：

 
====================================================== 
First Column  
Second Column | Third Column 
====================================================== 
Very long first column that should float on top of other columns 
     1     2 

感謝您的任何指導！

Answer 1

你可以重置顯示，但重點在哪裏？

tr { 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 
tr :first-child { 
 
    width:100%; 
 
    flex:1 1 100%; 
 
} 
 
td, th { 
 
    display:block; 
 
    margin:3px; 
 
    flex:1; 
 
    } 
 
table, th, td{ 
 
    border:solid 1px; 
 
}

<table class="table-foldingfirstcolumn"> 
 
    <thead> 
 
    <tr> 
 
     <th>First Column</th> 
 
     <th>Second Column</th> 
 
     <th>Third Column</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Very long first column that should float on top of other columns</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
    </tr> 
 
    </tbody> 
 
</table>