brunodd brunodd - 5 months ago 10
CSS Question

Break table <td> in two lines

How to break the table td in two lines using media query?

jsfiddle

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

Answer

Add display: block; to occupy the full width.

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