为什么响应表不能正常工作？

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

Normal Table是..

​

正在上映什么？

​

我所期待的

​

我在这里试过了，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>

​