CSS Table響應格式

我還沒有找到確切的例子，所以請指點我的鏈接，如果你有。CSS Table響應格式

我想在HTML表格響應如下 - 這可能與CSS？

<table> 
    <thead> 
     <tr> 
     <td>HEADER Data 1</td> 
     <td>HEADER Data 2</td> 
     <td>HEADER Data 3</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Row 1 Data 1</td> 
     <td>Row 1 Data 2</td> 
     <td>Row 1 Data 3</td> 
     </tr> 
     <tr> 
     <td>Row 2 Data 1</td> 
     <td>Row 2 Data 2</td> 
     <td>Row 2 Data 3</td> 
     </tr> 
     <tr> 
     <td>Row 3 Data 1</td> 
     <td>Row 3 Data 2</td> 
     <td>Row 3 Data 3</td> 
     </tr> 
    </tbody> 
</table>

在小屏幕上我想響應，這樣是表放置數據如下：

HEADER Data 1 
Row 1 Data 1 
Row 1 Data 2 
Row 1 Data 3 

HEADER Data 2 
Row 2 Data 1 
Row 2 Data 2 
Row 2 Data 3 

HEADER Data 3 
Row 3 Data 1 
Row 3 Data 2 
Row 3 Data 3

來源

2014-09-11 TheRealPapa

不表，但絕對與申報單，查找'表cell' – beautifulcoder 2014-09-11 02:01:16

http://css-tricks.com/responsive-data-table-roundup/ – chconger 2014-09-11 02:38:05

您確定您想要按行分組的小屏幕，還是想按列分組？ – 2014-09-11 03:15:40

我希望這將有助於使表響應。

這裏有一個fiddle

HTML：

<table> 
    <thead> 
     <tr> 
      <td>Name</td> 
      <td>Age</td> 
      <td>Gender</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Qasim</td> 
      <td>23yrs</td> 
      <td>Male</td> 
     </tr> 
     <tr> 
      <td>Ali</td> 
      <td>19yrs</td> 
      <td>Male</td> 
     </tr> 
     <tr> 
      <td>William</td> 
      <td>34yrs</td> 
      <td>Male</td> 
     </tr> 
    </tbody> 
</table>

CSS：

td{ 
    width:100px; 
} 
@media (max-width: 600px) { 
    thead { 
     display: none; 
    } 
    tr{ 
     display:grid; 
     border-bottom:1px solid #000000; 
    } 
    td:nth-of-type(1):before { content: "Name"; } 
    td:nth-of-type(2):before { content: "Age"; } 
    td:nth-of-type(3):before { content: "Gender"; } 

    td:before{ 
     width:150px; 
     float:left; 
    } 
    td{ 
     width:300px; 
    } 

}

來源

2017-08-22 06:45:25

把每一個頭部的副本對應的行內，並與CSS僞隱藏選擇器:first-child。然後使用媒體查詢來更改佈局，隱藏常規標題並顯示隱藏的標題。

HTML：

<table> 
    <thead> 
     <tr> 
      <td>HEADER Data 1</td> 
      <td>HEADER Data 2</td> 
      <td>HEADER Data 3</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>HEADER Data 1</td> 
      <td>Row 1 Data 1</td> 
      <td>Row 1 Data 2</td> 
      <td>Row 1 Data 3</td> 
     </tr> 
     <tr> 
      <td>HEADER Data 2</td> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
      <td>Row 2 Data 3</td> 
     </tr> 
     <tr> 
      <td>HEADER Data 3</td> 
      <td>Row 3 Data 1</td> 
      <td>Row 3 Data 2</td> 
      <td>Row 3 Data 3</td> 
     </tr> 
    </tbody> 
</table>

CSS：

tbody tr td:first-child { 
    display: none; 
} 
@media (max-width: 600px) { 
    thead { 
     display: none; 
    } 
    td { 
     display: block; 
     clear: left; 
    } 
    tbody tr td:first-child { 
     display: block; 
    } 
}

這裏有一個fiddle。

來源

2014-09-11 03:02:04 flowstoneknight

真棒！謝謝@flowstoneknight！ – TheRealPapa 2014-09-11 07:54:34

CSS Table響應格式

回答

相關問題