表重新排序響應

有一個HTML表是這樣的：表重新排序響應

<table> 
    <tr> 
     <td>A</td> 
     <td>N</td> 
    </tr> 
    <tr> 
     <td>B</td> 
     <td>O</td> 
    </tr> 
    <tr> 
     <td>C</td> 
     <td>P</td> 
    </tr> 
    <tr> 
     <td>D</td> 
     <td>Q</td> 
    </tr> 
    <tr> 
     <td>E</td> 
     <td>R</td> 
    </tr> 
    <tr> 
     <td>F</td> 
     <td>S</td> 
    </tr> 
    <tr> 
     <td>G</td> 
     <td>T</td> 
    </tr> 
    <tr> 
     <td>H</td> 
     <td>U</td> 
    </tr> 
    <tr> 
     <td>I</td> 
     <td>V</td> 
    </tr> 
    <tr> 
     <td>J</td> 
     <td>W</td> 
    </tr> 
    <tr> 
     <td>K</td> 
     <td>X</td> 
    </tr> 
    <tr> 
     <td>L</td> 
     <td>Y</td> 
    </tr> 
    <tr> 
     <td>M</td> 
     <td>Z</td> 
    </tr> 
</table>

看起來像這樣：

這是所有好，現在在小屏幕上，我想只有一個<td>每row但保持「按字母順序排列」的順序。所以應該看起來像這樣：

有沒有辦法通過CSS來改變這種只得到想要的結果？我已經在這裏創造一個小提琴http://jsfiddle.net/5eweva69/

來源

2014-12-04 caramba

隱藏原始表格並顯示另一個表格。（使用CSS'@ media'查詢） – 2014-12-04 16:28:09

@SimplyCraig爲什麼我不喜歡這樣的兩個原因。 1.表格在網站CMS編輯器（ckeditor或tinyMCE）中生成，因此很難生成第二張表格。2.雙重「代碼」顯示相同並顯示/隱藏以便進行響應是壞習慣 – caramba 2014-12-04 16:31:18

使用替代標籤（divs或lis等）而不是表格。對於你想要做的事來說，它固有地不靈活。 – Morfie 2014-12-04 16:32:16

我同意使用DIVS或者一些其他的選擇，但如果你停留在表 - 桌子上的div如何？小提琴這裏：http://jsfiddle.net/nvnghLn7/

<table> 
    <tr> 
     <td id="leftSide"> 
     <div>A</div> 
     <div>B</div> 
     <div>C</div> 
     <div>D</div> 
     <div>E</div> 
     <div>F</div> 
     <div>G</div> 
     <div>H</div> 
    </td> 
    <td id="rightSide"> 
     <div>N</div> 
     <div>O</div> 
     <div>P</div> 
     <div>Q</div> 
     <div>R</div> 
     <div>S</div> 
     <div>T</div> 
     <div>U</div> 
    </td> 
    </tr> 
</table>

然後設置#leftSide和#rightSide爲display：block在較小的屏幕。（將TD設置爲阻止不適用於圓頂文檔類型聲明，因此完全使用DIVS實際上是最佳選擇。）

來源

2014-12-04 17:08:50 deebs

這裏是所有div的小提琴：http://jsfiddle.net/2svbrpgn/ – deebs 2014-12-04 17:50:26

感謝@Morfie並深表您的意見以及您的回答。我將它固定爲'

'因爲它真的好像是最好的，直到W3C看到我的帖子，並使表格響應:) – caramba 2014-12-08 12:11:02

有沒有辦法可以使用<table>元素做到這一點，<td>標籤意味着一列，<tr>表示一排，沒有CSS可以改變這種結構，除非你要求W3C (World Wide Web Consortium) Community誰使HTML標準。

那麼你可以使用引導或<div>或<ul>列表

好運雖然達到類似的效果.. :)

來源

2014-12-04 16:55:38 Awesomestvi

謝謝，很好的回答！ +1 – caramba 2014-12-04 17:07:54

表重新排序響應

回答

相關問題