2016-04-12 154 views
0

是否可以垂直填充表格?我的意思是這樣的垂直自舉填充表

,而不是填充這樣


Column1 Column2 Column3 Column4 Column5 Column6 

data1-1 data1-2 data1-3 data1-4 data1-5 data1-6 


data2-1 data2-2 data2-3 data2-4 data2-5 data2-6 

Column1  Column2 Column3 Column4 Column5 Column6 
data1-1  data2-1 
data1-2  data2-2 
data1-3  data2-3 
data1-4  data2-4 
data1-5  data2-5 
data1-6  data2-6 

回答

0

試試這個CSS技巧與<tr>

tr { 
    display: block; 
    float: left; 
} 

th, td { 
    display: block; 
} 
0

顯示列,而不是行你當然可以玩無線按照上面提到的方式在HTML表格中輸入。這只是您希望如何表示數據的問題。在上面的例子中,你有2行6列,而另一列有2列6行。嘗試這個plunk: http://plnkr.co/edit/u0aBeB3ABvR7m35hBLHk?p=preview

它有兩個表格顯示如何適應這兩種形式的數據。希望它可以幫助你。下面是HTML代碼:

首先表

<table> 
    <thead>Table display 
    </thead> 
    <tbody> 
    <tr> 
     <td>Firstname</td> 
     <td>Mike</td> 
     <td>Hally</td> 
     <td>Jack</td> 
     <td>Mona</td> 
    </tr> 
    <tr> 
     <td>Lastname</td> 
     <td>Evans</td> 
     <td>Ema</td> 
     <td>Wang</td> 
     <td>Lizzie</td> 
    </tr> 
    </tbody> 
</table> 

<p>Second Table</p> 
<table> 
    <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    </tr> 
    <tr> 
    <td>Mike</td> 
    <td>Evans</td> 
    </tr> 
    <tr> 
    <td>Hally</td> 
    <td>Ema</td> 
    </tr> 
    <tr> 
    <td>Jack</td> 
    <td>Wang</td> 
    </tr> 
    <tr> 
    <td>Mona</td> 
    <td>Lizzie</td> 
    </tr>