CSS - Wrapping precedence

Question

I have a table with 3 columns

**********************************************************
*  Name        *     Description               * Actions *
**********************************************************
*  John        * Lorem ipsum bla bla etc eetc  *   B1    *
*              *                               *   B2    *
**********************************************************

What happens is that the last column wraps its content first, then the description column. I would like the Description column to wrap first instead. I tried adding white-space: nowrap but then the Actions column never wraps.

How does the browser decide which column to wrap?

I want the column 3 to be the last to wrap. So until the Description column is fully wrapped it should show the buttons on a single line. When there is no more space the column can wrap.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');

<table class="table">
  <thead>
    <tr>
      <th>Entity</th>
      <th>ID</th>
      <th>Description</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Customer</td>
      <td>9004</td>
      <td>null, asdjkajk, kkkjk, kjkk, kkk, 898989</td>
      <td>
        <button class="btn c-btn">
          <span class="glyphicon glyphicon-pencil"></span>
        </button>
        <button class="btn c-btn">
          <span class="glyphicon glyphicon-remove"></span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Columns wrap their text in descending order in a table. So you only need to fix the last column's width.

If you want it to wrap again in small screens, just add a media query (see CSS) to reset it's width to auto and give the columng it's priority to wrap.

table{
  width:300px;
}

td{
  border:1px solid black;
}

table>tr>td:last-child{
  width:40px;
}

@media (max-width: 200px) {
  table>tr>td:last-child{
    width:auto;
  }
}

<table>
  <tr>
    <td>Col1</td>
    <td class="cc">Description</td>
    <td>Actions</td>
  </tr>
  <tr>
    <td>John</td>
    <td class="cc">Lorem ipsum bla bla black test long text</td>
    <td>BA AB</td>
  </tr>
</table>

Answer 2

Give the first and last column a width. The center layout will then take all the remaining layout and wrap its contents if needed.