轉換表垂直部首

我有這樣轉換表垂直部首

<table> 
    <thead> 
     <tr> 
      <th>Numbers</th> 
      <th>Alphabet</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>a</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>b</td> 
     </tr> 
    </tbody> 
</table>

通常一個表中，第一列將顯示Number 1 2（頂部到底部）和第2欄是Alphabet a b

現在，我想將<thead>轉換爲垂直，將<tbody> <tr>轉換爲垂直，這樣Number 1 2將處於水平線，而Alphabet a b將處於另一水平線。

CSS

thead { 
    float: left; 
} 

thead th { 
    display: block; 
} 

tbody { 
    float: right; 
}

的thead變爲垂直，但tbody tr沒有。

有誰知道如何讓它工作？謝謝

來源

2014-01-23 abcid d

爲什麼你不不換桌子？看我的小提琴> http://jsfiddle.net/nNW9J/！ – zey

謝謝，但我必須以這種方式創建表格。這是爲了網絡響應。首先，它會在一個大屏幕上正常顯示，然後它會被轉換成一個小屏幕。任何想法？ –

爲什麼不使用這種結構，如果你的表格不會動態改變。

<table> 
    <tr> 
     <th>Numbers</th> 
     <td>1</td> 
     <td>1</td> 
    </tr> 
    <tr> 
     <th>Alphabet</th> 
     <td>a</td> 
     <td>a</td> 
    </tr> 
    </table>

來源

2014-01-23 04:22:13 Saurabh

我的朋友，在這種情況下，不要使用thead和tbody。這樣做，

<table> 
    <tr> 
    <th>Numbers</th> 
    <td>1</td> 
    <td>2</td> 
    </tr> 
    <tr> 
    <th>Alphabet</th> 
    <td>a</td> 
    <td>b</td> 
    </tr> 
</table>

來源

2014-01-23 04:31:13 Shivam

謝謝Shivam！但我必須以這種方式創建表格。這是爲了網絡響應。首先，它會在一個大屏幕上正常顯示，然後它會被轉換成一個小屏幕。任何想法？ –

對不起，Zey我沒有適當的web響應的想法。 – Shivam

不知道爲什麼只是不改變表佈局，但我想你有你的理由。無論如何，這是不容易的:)

這裏的CSS代碼

table{ 
    display:block; 
    padding: 0px; 
    border-collapse:collapse; 
    border-spacing:0; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 
thead{ 
    display: block; 
    float: left; 
    margin: 0px; 
    padding: 0px; 
    width: 100px; 
} 
tbody{ 
    margin: 0px; 
    padding: 0px; 
} 
tbody tr { 
    float:left; 
} 
th, td{ 
    display:block; 
    padding: 5px; 
    margin: 0px; 
} 
thead > tr th:nth-child(odd) { 
     display:block; 
     float:left; 
} 
thead > tr th:nth-child(even) { 
    display:block; 
    float:left; 
} 
tbody > tr td:nth-child(odd) { 
    display:block; 
} 
tbody > tr td:nth-child(even) { 
    display:block; 
    float:right; 
}

，並在這裏與YOUT HTML表結構演示： http://jsfiddle.net/darkosss/83kVc/

希望這有助於

來源

2014-01-23 06:21:23 Darko

轉換表垂直部首

回答

相關問題