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响应格式

回答

相关问题