如何在html css中制作响应式表格[复制]-解网

问：

这个问题在这里已经有答案了：

使用 HTML/CSS 在移动设备上使表格具有响应性（4 个答案）

如何使 html 表格具有响应性（9 个答案）

如何使表格具有响应性（2 个答案）

使表格内容响应屏幕尺寸（1 个答案）

4天前关闭。

我正在尝试以一种我认为不可能的方式响应我正在处理的表数据，除非这里的其他人认为是？

基本上，我有一个表格，它的最大尺寸显示 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吗？

jQuery CSS HTML表响应

.responsive-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

.responsive-table tbody,
.responsive-table tr,
.responsive-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    .responsive-table tr {
        display: table-row;
    }

    .responsive-table td {
        display: table-cell;
        width: auto;
    }
}

<table class="responsive-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>

1赞 Ishtiaq Ahmed 11/15/2023 #2

在 HTML 和 CSS 中创建响应式表格涉及使用媒体查询和应用适应不同屏幕尺寸的样式。请看下面的代码：

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}


/* Responsive Styles */

@media (max-width: 600px) {
  table {
    border: 0;
  }
  th,
  td {
    border: 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  th {
    text-align: center;
  }
}

<h2>Responsive Table</h2>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>[email protected]</td>
      <td>555-1234</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>[email protected]</td>
      <td>555-5678</td>
    </tr>
  </tbody>
</table>

如何在html css中制作响应式表格[复制]

How to make responsive tables in html css [duplicate]

评论

评论