打破两行表

Question

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

jsfiddle

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

Answer 1

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

Demo

Answer 2

添加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>