Skip to main content
MybringDesign System

Width, alignment and wrapping

How to limit width, place and wrap data

Right aligned without wrapping

Certain kind of data, like money or other comparative sizes, are easiest to read in context when right aligned. This also makes sense if the currency symbol is in use – since that should be placed before the number. Use the tr utility class on header and body cells, and if you don’t want to wrap the lines, add ws-nowrap.

Reference

  • tr (utility class, not the table row element)
  • ws-nowrap
  • wrap utilities
Shipment Recipient Sent Price
987654321 Acme Industries 14.07.2016 12.56 NOK 198 765
123456789 Burgers and Beauty as 26.06.2016 14.12 NOK 747
456789123 Rent-A-Cat Co. 02.05.2016 11.38 NOK 37 
<table class="mb-table">
<thead>
  <tr>
    <th scope="col">Shipment</th>
    <th scope="col">Recipient</th>
    <th scope="col">Sent</th>
    <th scope="col" class="tr">Price</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><a href="#">987654321</a></td>
    <td>Acme Industries</td>
    <td>14.07.2016 12.56</td>
    <td class="tr ws-nowrap">NOK 198 765</td>
  </tr>
  <tr>
    <td><a href="#">123456789</a></td>
    <td>Burgers and Beauty as</td>
    <td>26.06.2016 14.12</td>
    <td class="tr ws-nowrap">NOK 747</td>
  </tr>
  <tr>
    <td><a href="#">456789123</a></td>
    <td>Rent-A-Cat Co.</td>
    <td>02.05.2016 11.38</td>
    <td class="tr ws-nowrap">NOK 37</td>
  </tr>
</tbody>
</table>

Min-width and wrapping

Use the min-width utilities on colum headers to stop the column from shrinking below the given size. This is also a way to control the wrapping and if you know the data will never exceed a certain size, it can also be a simpler alternative to the ws-nowrap class which has to be used on a cell level.

Reference

min-width utilities
Shipment Recipient Sent Instructions
987654321 Acme Industries 14.07.2016 12.56 Deliver behind the rusty, old mountainbike
123456789 Burgers and Beauty as 26.06.2016 14.12 Put it in the pillow box
456789123 Rent-A-Cat Co. 02.05.2016 11.38 Second entrance around the corner 
<table class="mb-table">
<thead>
  <tr>
    <th scope="col">Shipment</th>
    <th scope="col" class="minw12r">Recipient</th>
    <th scope="col">Sent</th>
    <th scope="col" class="minw12r">Instructions</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><a href="#">987654321</a></td>
    <td>Acme Industries</td>
    <td class="ws-nowrap">14.07.2016 12.56</td>
    <td>Deliver behind the rusty, old mountainbike</td>
  </tr>
  <tr>
    <td><a href="#">123456789</a></td>
    <td>Burgers and Beauty as</td>
    <td class="ws-nowrap">26.06.2016 14.12</td>
    <td>Put it in the pillow box</td>
  </tr>
  <tr>
    <td><a href="#">456789123</a></td>
    <td>Rent-A-Cat Co.</td>
    <td class="ws-nowrap">02.05.2016 11.38</td>
    <td>Second entrance around the corner</td>
  </tr>
</tbody>
</table>

Max- and min-width and wrapping

Since the largest cell dictates the column width, maximum width doesn’t work like minimum width, and has to be set on cell level. This is usually only needed when there are a lot of text and you want to prevent the lines from getting too wide.

Reference

max-width utilities
Shipment Recipient Sent Life story
987654321 Acme Industries 14.07.2016 12.56 This really long piece of text benefits from wrapping. Not only because it’s long, but because there is a big variation between the length of this column’s content.
123456789 Burgers and Beauty as 26.06.2016 14.12 I’m just short.
456789123 Rent-A-Cat Co. 02.05.2016 11.38 The column also has a min-width to prevent the text from becoming ridiculously squashed. 
<table class="mb-table">
<thead>
  <tr>
    <th scope="col">Shipment</th>
    <th scope="col">Recipient</th>
    <th scope="col">Sent</th>
    <th scope="col" class="minw12r">Life story</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><a href="#">987654321</a></td>
    <td>Acme Industries</td>
    <td>14.07.2016 12.56</td>
    <td class="maxw24r">
      This really long piece of text benefits from wrapping. Not only because
      it’s long, but because there is a big variation between the length of
      this column’s content.
    </td>
  </tr>
  <tr>
    <td><a href="#">123456789</a></td>
    <td>Burgers and Beauty as</td>
    <td>26.06.2016 14.12</td>
    <td class="maxw24r">I’m just short.</td>
  </tr>
  <tr>
    <td><a href="#">456789123</a></td>
    <td>Rent-A-Cat Co.</td>
    <td>02.05.2016 11.38</td>
    <td class="maxw24r">
      The column also has a min-width to prevent the text from becoming
      ridiculously squashed.
    </td>
  </tr>
</tbody>
</table>

Forced wrapping

Forcing long words to break and wrap is useful when it has no spaces or uses underscores instead. ofw-anywhere breaks only words that are too long for the given space - decided by max-width or the viewport. If the data varies in length, test and see if you need to set min- or max-width as well.

Reference

Shipment Customer Agreements
987654321 Acme Industries A_long_filename_that_uses_underscores_instead_of_spaces
123456789 Burgers and Beauty as SPECIAL_DELIVERY_AGREEMENT_BREAKS_ANYWHERE
456789123 Rent-A-Cat Co. No agreement for cats. Contact rentcatsbutnotdogs@rentacatcompany.meow 
<table class="mb-table">
<thead>
  <tr>
    <th scope="col">Shipment</th>
    <th scope="col">Customer</th>
    <th scope="col" class="minw9r">Agreements</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><a href="#">987654321</a></td>
    <td>Acme Industries</td>
    <td class="maxw20r ofw-anywhere">
      A_long_filename_that_uses_underscores_instead_of_spaces
    </td>
  </tr>
  <tr>
    <td><a href="#">123456789</a></td>
    <td>Burgers and Beauty as</td>
    <td class="maxw20r ofw-anywhere">
      SPECIAL_DELIVERY_AGREEMENT_BREAKS_ANYWHERE
    </td>
  </tr>
  <tr>
    <td><a href="#">456789123</a></td>
    <td>Rent-A-Cat Co.</td>
    <td class="maxw20r ofw-anywhere">
      No agreement for cats. Contact rentcatsbutnotdogs@rentacatcompany.meow
    </td>
  </tr>
</tbody>
</table>