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

Question

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

<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/，但无法做到这一点

Answer 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>