CODEWITHSUNDEEP
csshtml-table
brunodd
brunodd

Reputation: 2584

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

Upvotes: 0

Views: 134

Answers (2)

KittMedia
KittMedia

Reputation: 7466

The easiest way would be to set them to display: block;.

Demo

Upvotes: 2

m4n0
m4n0

Reputation: 32275

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>

Upvotes: 1

Related Questions