将 table <td> 分成两行

Question

如何使用媒体查询将 table td 分成两行？

@media only screen and (max-width : 768px) {
        .table > tbody > tr > td {
            width: 100%;
            max-width: 100%;
        }
    }

Answer 1

加display: block;占满宽度

@media only screen and (max-width: 768px) {
  @include font-size(1.4);
  .table > tbody > tr > td {
    width: 100%;
    max-width: 100%;
    display: block;
  }
}

<table class="table">
  <tbody>
    <tr>
      <td>Date posted</td>
      <td>01/06/2015</td>
    </tr>
  </tbody>
</table>

Answer 2

最简单的方法是将它们设置为 display: block;。

Demo

将 table <td> 分成两行

Break table <td> in two lines

css

html-table