Wrap text in `` tag

More than a fancy wrap: Advanced techniques in text wrapping

Responsiveness with media queries

In the wild, screens come in different sizes. To maintain harmony, utilize media queries for a responsive design:

@media screen and (max-width: 600px) {
  .boundary-abiding-text {
    white-space: pre-wrap; /* Small screens, we got you covered! */
  }
}


Flexbox and grid: The Picasso of layouts

Unleash the Picasso within. Use flexbox or grid for better control over your table layouts:

.table-flex {
  display: flex;
  flex-direction: column; /* Because cells deserve to live vertically */
}


Sorting and filtering: The GPS of tables

Lost in the heap of data? Implement sorting and filtering. Turns your table into a neat GPS:

function sortTableData(column) {
  // Your sortation charm goes here
}


function filterTableData(criteria) {
  // Hide-and-seek champion data, your time is up!
}


Conditional formatting: The highlighter of tables

Bring to light important data with conditional formatting. This will make data stand out in your table:

td.important {
  background-color: yellow; /* Your 15 seconds of fame start now */
}


From chaos to order: Further tidying your <td>

Fixed table layout for tough love

For the tough times when column widths act out, use table-layout: fixed;:

table {
  table-layout: fixed;
  width: 100%; /* Spread out, kids */
}


td {
  width: 15%; /* Gotcha! Now, don't wander off */
}


Too much is too bad

When you have too much text, make use of word-break: break-all;:

td {
  word-break: break-all; /* Break it down... letter by letter */
}


Size does matter: Responsive tables

Account for various screen sizes to grant <td> width and text wrapping accordingly using media queries:

@media screen and (max-width: 768px) {
  td {
    width: auto; /* Flexibility, thy name is auto */
  }
}


Setting boundaries

Limit the width to prevent your layout from going haywire:

td {
  max-width: 120px; /* Whoa! Halt at 120px */
}


Dealing with ghosts of browsers past

Working with older browsers? Worry not, we got you covered with max-width hacks and manual cell width calculations:

table {
  width: 600px; /* Fixed and this won't budge */
}
td {
  max-width: 150px; /* Surviving the harsh winters of IE */
}
