How to make the width of a table column occupy the required space with ellipses overflow?

Question

I would like my table to be 100% wide, and for each column of the table only the space it occupies is occupied. If it overflows, an ellipsis appears.

Without table layout: fixed:

html, body { margin: 0; padding: 0; font-family: sans-serif; */ } .account-products-container .table { width: 100%; max-width: 100%; margin: 20px 0; border-collapse: collapse; border-spacing: 0; display: table; table-layout: auto; } .account-products-container .table-striped>tbody>tr:nth-of-type(odd) { background-color: #eee; } .account-products-container .table>thead>tr>th { padding: 8px; line-height: 1.428571429; font-weight: 600; text-transform: uppercase; vertical-align: bottom; border-bottom: 1px solid #DDD; text-align: left; } .account-products-container .table>tbody>tr>td { padding: 8px; line-height: 1.428571429; vertical-align: top; border-top: 1px solid #DDD; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } 

 <div class="account-products-container"> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Product</th> </tr> </thead> <tbody> <tr> <td>123456789</td> <td>This is the name of a product that is long</td> </tr> <tr> <td>549490309</td> <td>This is a product title that is even longer than the first one and longer than the second one because the second one is short, so of course it longer.</td> </tr> <tr> <td>005948333</td> <td>This one is short</td> </tr> </tbody> </table> </div> 

This is how I want the column to look, but without table-layout: fixed; the table overflows instead of resizing due to white-space: nowrap; .

With table layout: fixed:

 html, body { margin: 0; padding: 0; font-family: sans-serif; */ } .account-products-container .table { width: 100%; max-width: 100%; margin: 20px 0; border-collapse: collapse; border-spacing: 0; display: table; table-layout: fixed; } .account-products-container .table-striped>tbody>tr:nth-of-type(odd) { background-color: #eee; } .account-products-container .table>thead>tr>th { padding: 8px; line-height: 1.428571429; font-weight: 600; text-transform: uppercase; vertical-align: bottom; border-bottom: 1px solid #DDD; text-align: left; } .account-products-container .table>tbody>tr>td { padding: 8px; line-height: 1.428571429; vertical-align: top; border-top: 1px solid #DDD; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } 

 <div class="account-products-container"> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Product</th> </tr> </thead> <tbody> <tr> <td>123456789</td> <td>This is the name of a product that is long</td> </tr> <tr> <td>549490309</td> <td>This is a product title that is even longer than the first one and longer than the second one because the second one is short, so of course it longer.</td> </tr> <tr> <td>005948333</td> <td>This one is short</td> </tr> </tbody> </table> </div> 

This responds well and has ellipses, but my column no longer takes up minimal space.

How can I make a column occupy only the space that they need and the table responds well?

If you want to play with him: JSFiddle

Answer 1

You can

• Use the auto layout to account for content.
• Set the table width to 100%. It will be considered as the minimum width.
• Set the width of the second column to 100%. Then it will grow, taking all the free space, if any.
• To prevent the second column from expanding due to content, wrap them in absolutely positioned containers.

 html, body { margin: 0; padding: 0; font-family: sans-serif; */ } .account-products-container .table { width: 100%; max-width: 100%; margin: 20px 0; border-collapse: collapse; border-spacing: 0; display: table; table-layout: auto; } .account-products-container .table-striped>tbody>tr:nth-of-type(odd) { background-color: #eee; } .account-products-container .table>thead>tr>th { padding: 8px; line-height: 1.428571429; font-weight: 600; text-transform: uppercase; vertical-align: bottom; border-bottom: 1px solid #DDD; text-align: left; } .account-products-container .table>tbody>tr>td { padding: 8px; line-height: 1.428571429; vertical-align: top; border-top: 1px solid #DDD; cursor: pointer; white-space: nowrap; } td:nth-child(2) { width: 100%; position: relative; } td:nth-child(2):not(:empty)::after { /* Prevent row from collapsing vertically if the first column is empty */ content: ''; display: inline-block; } td:nth-child(2) > span { position: absolute; left: 0; right: 0; overflow: hidden; text-overflow: ellipsis; } 

 <div class="account-products-container"> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Product</th> </tr> </thead> <tbody> <tr> <td>123456789</td> <td><span>This is the name of a product that is long</span></td> </tr> <tr> <td>549490309</td> <td><span>This is a product title that is even longer than the first one and longer than the second one because the second one is short, so of course it longer.</span></td> </tr> <tr> <td>005948333</td> <td><span>This one is short</span></td> </tr> </tbody> </table> </div>