CSS 表格响应格式

Posted 2023-03-05

【中文标题】CSS 表格响应格式

【英文标题】：CSS Table responsiveness format

【发布时间】：2014-11-04 19:39:24

【问题描述】：

我还没有找到确切的例子，所以如果你有，请给我一个链接。

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

【问题讨论】：

不是表格，但肯定有 div，查找 table-cell

css-tricks.com/responsive-data-table-roundup

小屏你确定要按行分组，还是要按列分组？

【参考方案1】：

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

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

【参考方案2】：

将每个标题的副本放在相应的行内，并使用 CSS 伪选择器 :first-child 将其隐藏。然后使用媒体查询改变布局，隐藏正常的header，显示隐藏的headers。

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。

【讨论】：

太棒了！谢谢@flowstoneknight！