为啥响应式表没有按预期工作？

Posted 2023-03-06

【中文标题】为啥响应式表没有按预期工作？

【英文标题】：Why does responsive table is not working as expected?为什么响应式表没有按预期工作？

【发布时间】：2021-11-11 07:08:54

【问题描述】：

我正在尝试使表格具有响应性，但它​​没有像我预期的那样工作。

<figure class="i_table"><table><tbody><tr><td>Title-1</td><td>Title-2</td></tr><tr><td>A</td><td>B</td></tr><tr><td>Title-3</td><td>Title-4</td></tr><tr><td>C</td><td>D</td></tr></tbody></table></figure>

CSS

    .i_table table    width: 100%;
  border-collapse: collapse;

.i_table tr:nth-of-type(odd) 
  background: #eee;

.i_table th 
  background: #333;
  color: white;
  font-weight: bold;

.i_table td,
th 
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;

@media all and (max-width:500px) 

  .i_table table,
  thead,
  tbody,
  th,
  td,
  tr 
    display: block;
  

普通表是..

显示的内容

我所期待的

我在这里尝试过https://jsfiddle.net/7gy9zwox/，但无法做到这一点

【参考方案1】：

它没有按您的意愿工作，因为标题单元格是同级单元格，当它们被强制显示为全角单元格时，它们会彼此相邻显示。

要将标题和内容单元格放在一起，需要以某种方式将它们组合在一起，以便它们保持在一起。我通过将标题和内容单元格放在 span 元素中来做到这一点，这些元素的样式看起来和行为就像您的表格单元格一样。

.i_table table 
  width: 100%;
  border-collapse: collapse;


.i_table td > span:nth-of-type(odd) 
  background: #eee;


.i_table th 
  background: #333;
  color: white;
  font-weight: bold;


td > span 
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;


@media all and (max-width:500px) 

  .i_table table,
  thead,
  tbody,
  th,
  td,
  tr 
    display: block;
  


td > span 
  display: block;

<figure class="i_table">
    <table>
        <tbody>
            <tr>
                <td>
                    <span>Title-1</span>
                    <span>A</span>
                </td>
                <td>
                    <span>Title-2</span>
                    <span>B</span>
                </td>
            </tr>
            <tr>
                <td>
                    <span>Title-3</span>
                    <span>C</span>
                </td>
                <td>
                    <span>Title-4</span>
                    <span>D</span>
                </td>
            </tr>
        </tbody>
    </table>
</figure>