響應表

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

基本上我有一個表其最大尺寸在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嗎？

來源

2012-12-13 user1901096

什麼是「表格數據」？純文本？ ***您可以使用CSS浮動（而不是表格）來實現此功能。 –

@KyleSevenoaks - 然後設置寬度，以便它們包裹在3中。 33％。 – webnoob

這是表格數據嗎？ – Kyle

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

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

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

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

編輯

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

http://jsfiddle.net/nW2hx/

來源

2012-12-13 13:41:31 webnoob

優秀的例子，我們是一個很好的團隊;） – Timmetje

哈哈確實:-) – webnoob

我很想知道我剛剛被投票的原因... – webnoob

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

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

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

來源

2012-12-13 13:41:40 Timmetje

+1感謝您的參考;） – webnoob

沒問題，一個非常好的解決方案。但似乎OP不想代表實際的表格數據。由於多種原因（例如可訪問性），OP應該再看看他的html。一個很好的閱讀它可以在這裏找到：http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Timmetje

我已編輯我的示例，以提供非表方法幫助無障礙的戰爭:) – webnoob

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

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

來源

2012-12-13 14:02:32

謝謝，研究時也發現了這個鏈接，但並不是真正需要的解決方案。 – user1901096

如果你不介意使用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

來源

2016-02-16 11:50:46 user3392439

回答

相關問題