CSS is packaging priority

Question

I have a table with 3 columns

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

It happens that the last column first carries its contents, and then the description column. I would like the Description column to turn around first. I tried adding white-space: nowrap, but then the Actions column never wraps around.

How does the browser determine which column to wrap?

I want column 3 to be the last. Therefore, until the Description column is fully wrapped, it should display the buttons on the same line. When there is no more space, the column may turn around.

 @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 the table. Therefore, you only need to fix the last column width.

If you want it to fit on small screens again, just add the media request (see CSS) to reset its width to auto and give columng its priority for the transfer.

 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 the width. Then the center layout takes all the remaining layouts and completes their contents, if necessary.

Answer 3

See the automatic table format section in the specification:

Column widths are defined as follows:

• Calculate the minimum content width (MCW) for each cell: formatted content can span any number of lines, but a box for boxes cannot overflow. 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 line breaks other than the explicit line breaks occur.

• For each column, determine the maximum and minimum column width of the cells that span only that column. Minimum is that you want the cell with the largest minimum cell width (or the 'width' column, whichever is greater). Maximum is that it requires the cell with the largest maximum cell width (or the 'width' column, whichever is greater).

• For each cell that spans more than one column, increase the minimum width of the columns that it spans so that together they are at least as a cell. Do the same for maximum width. If possible, expand all stretched columns by about the same amount.

• For each element in a column group with a “width” other than “auto,” increase the minimum width of the columns it spans so that together they are at least as wide as the width of the column.

This gives the maximum and minimum width for each column.

The minimum header width (CAPMIN) is determined by calculating for which each signature has a minimum outer header width, like an MCW hypothetical table cell containing a header formatted as "display: block". The largest of the minimum external boundaries of CAPMIN.

The width of the column and the header affects the width of the final table as follows:

• If the element 'table' or 'inline-table' 'width' has a computed value (W) other than 'auto', the width used is greater than W, CAPMIN and the minimum width required for all columns plus the distance between cells or borders ( MIN). If the used width is greater than MIN, the extra width should be distributed in columns.
• If the "table" or "inline-table" element has "width: auto", the used width is larger than the table containing the block width, CAPMIN and MIN. However, if either CAPMIN or the maximum width required by the columns plus the distance between cells or borders (MAX) is less than in the containing block, use max (MAX, CAPMIN).

Note:

If the used width is greater than MIN, the extra width should be distributed in columns.

However, it does not indicate how it should be distributed.

In addition, the algorithm is not normative:

This algorithm reflects the behavior of several popular users of HTML agents when writing this specification. UAs are not required to implement this algorithm.

Therefore, the behavior is implementation dependent .