html - CSS表响应格式

我没有找到确切的示例，因此，如果您有，请指向我的链接。

我想使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

最佳答案

我希望这将有助于使表响应。


  这是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;
    }

}

关于html - CSS表响应格式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25777560/