響應表

Question

我試圖讓我的工作響應的方式，我不認爲這是可能的據我所知，除非其他人在這裏覺得這是表數據..

基本上我有一個表其最大尺寸在TR內顯示3個TD元素。當向下滾動到最小尺寸的TR只顯示2個TD元件了，其中先前第三TD在2是這樣的（更多或更少的視覺表示）下顯示：

最大寬度：

<table> 
    <tbody> 
     <tr> 
      <td>First table data</td> <td>Second table data</td> <td>Third table data</td> 
      <td>Fourth table data</td> <td>Fifth table data</td> <td>Sixth table data</td> 
     </tr> 
    </tbody> 
<table> 

最小寬度：

<table> 
    <tbody> 
     <tr> 
      <td>First table data</td> <td>Second table data</td> 
      <td>Third table data</td> <td>Fourth table data</td> 
      <td>Fifth table data</td> <td>Sixth table data</td> 
     </tr> 
    </tbody> 
<table> 

是這甚至可能嗎？如果是這樣，如何開始？這需要jQuery嗎？

Answer 1

是的，這是可能的。設置TD元素左浮動，並設置min-width

http://jsfiddle.net/RnmLF/1/

只要改變容器的大小，看它的工作。

我會研究你是否需要使用表。表僅用於顯示錶格數據，這些天（我們不是在90年代更多）

編輯

我冒昧地提供輔助功能（見@timmied的原因NON表版本爲什麼）

http://jsfiddle.net/nW2hx/

Answer 2

這是可以做到，如果你所有的數據單元是一行。 （請參閱@webnoob他的解決方案）如果不是，您可能還想將數據放入DIV元素中。他們可以輕鬆做到這一點。

您沒有行或列標題，所以我認爲您可以輕鬆地做到這一點，因爲您的數據顯然與它的當前列或行沒有關係。

正如我在下面的評論中所說，爲什麼我提到使用別的東西然後表是因爲它似乎不代表表格數據。在這裏閱讀更多：Why not use tables for layout in HTML?

Answer 3

請通過下面的鏈接查看您的查詢，在這裏你可以解決你的響應表的問題

http://css-tricks.com/examples/ResponsiveTables/responsive.php

Answer 4

如果你不介意使用div的，而不是表/ TR/TD ，以下是使用Flexbox的一個廣泛示例不同選項：Really Responsive tables using Flexbox。在最複雜的層面上，你會得到如下：

First Second Third Fourth Fifth Sixth Seventh Eighth 

First Third Fifth Seventh 
Second Fourth Sixth Eighth 

First Fifth 
Second Sixth 
Third Seventh 
Fourth Eighth