如何在html/css中將單列表流向右移？

我有一個動態添加和刪除值的列表。由於我們顯示的屏幕尺寸不是很高，我希望這些行向右移動。例如：如何在html/css中將單列表流向右移？

這是適合在屏幕上的表

____________ 
|______1_____| 
|______2_____| 
|______3_____|

這是事先並不適合在屏幕上

________________________ 
|______1_____|_____4_____| 
|______2_____|_____5_____| 
|______3_____|

感謝一個表，在這裏是怎麼了表看起來像。

<table id="values_table" class="table table-bordered panel"> 
    <tbody> 
    <tr> 
     <th><strong>Value</strong></th> 
    </tr> 

    <tr class="font-color3"> 
     <td data="1"></td> 
    </tr> 

    <tr class="font-color3"> 
     <td data="2"></td> 
    </tr> 

    <tr class="font-color3"> 
     <td data="3"></td> 
    </tr> 

    <tr class="font-color3"> 
     <td data="4"></td> 
    </tr> 

    <tr class="font-color3"> 
     <td data="5"></td> 
    </tr> 
    </tbody> 
</table>

來源

2016-12-30 h3y4w

它不清楚明白，你要輸出到像第二圖像？ –

@JonesVinothJoseph很抱歉。我的意思是當有更多的行而不是離開屏幕時，我想讓表格向右延伸。 – h3y4w

水平滾動頁面是什麼意思？ –

試試這個，僅僅指剛一些小技巧與display: flex;

tbody { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 80px; 
 
} 
 
tr { 
 
    border: 1px solid #000; 
 
    width: 100%; 
 
}

<table id="values_table" class="table table-bordered panel"> 
 
    <tbody> 
 

 
    <tr class="font-color3"> 
 
     <td data="1">1</td> 
 
    </tr> 
 

 
    <tr class="font-color3"> 
 
     <td data="2">2</td> 
 
    </tr> 
 

 
    <tr class="font-color3"> 
 
     <td data="3">3</td> 
 
    </tr> 
 

 
    <tr class="font-color3"> 
 
     <td data="4">4</td> 
 
    </tr> 
 

 
    <tr class="font-color3"> 
 
     <td data="5">5</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2016-12-30 04:09:40 aavrug

如何在html/css中將單列表流向右移？

回答

相關問題