CSS - Wrapping precedence - html

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.

Answer 3

See the automatic table layout section in the spec:
Column widths are determined as follows:
Calculate the minimum content width (MCW) of each cell: the formatted content may span any number of lines but may not overflow
the cell box. If the specified 'width' (W) of the cell is greater
than MCW, W is the minimum cell width. A value of 'auto' means that
MCW is the minimum cell width.
Also, calculate the "maximum" cell width of each cell: formatting the content without breaking lines other than where explicit line
breaks occur.
For each column, determine a maximum and minimum column width from the cells that span only that column. The minimum is that required by
the cell with the largest minimum cell width (or the column
'width', whichever is larger). The maximum is that required by
the cell with the largest maximum cell width (or the column
'width', whichever is larger).
For each cell that spans more than one column, increase the minimum widths of the columns it spans so that together, they are at least as
wide as the cell. Do the same for the maximum widths. If possible,
widen all spanned columns by approximately the same amount.
For each column group element with a 'width' other than 'auto', increase the minimum widths of the columns it spans, so that together
they are at least as wide as the column group's 'width'.
This gives a maximum and minimum width for each column.
The caption width minimum (CAPMIN) is determined by calculating for
each caption the minimum caption outer width as the MCW of a
hypothetical table cell that contains the caption formatted as
"display: block". The greatest of the minimum caption outer widths is
CAPMIN.
Column and caption widths influence the final table width as follows:
If the 'table' or 'inline-table' element's 'width' property has a computed value (W) other than 'auto', the used width is the
greater of W, CAPMIN, and the minimum width required by all the
columns plus cell spacing or borders (MIN). If the used width is
greater than MIN, the extra width should be distributed over the
columns.
If the 'table' or 'inline-table' element has 'width: auto', the used width is the greater of the table's containing block width,
CAPMIN, and MIN. However, if either CAPMIN or the maximum width
required by the columns plus cell spacing or borders (MAX) is less
than that of the containing block, use max(MAX, CAPMIN).
Note it says
If the used width is greater than MIN, the extra width should be
distributed over the columns.
However, it doesn't specify how it should be distributed.
Moreover, the algorithm is non-normative:
This algorithm reflects the behavior of several popular HTML user
agents at the writing of this specification. UAs are not required to
implement this algorithm.
Therefore, the behavior is implementation-dependent.