HTML CSS examples for CSS Widget:Table Column
Min-width for fluid column in fixed width table
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .container {<!-- ww w. j a v a 2 s.com--> max-width:901px; } table { table-layout:fixed; width:100%; min-width:501px; border:2px solid Chartreuse; border-collapse:separate; border-spacing:0; } th { min-width:100px; } th.fixed { width:100px; min-width:100px; } th.fluid { min-width:100px; } td.fluid div { width:100%; min-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } td.fluid { background-color:yellow; min-width:100px; width:100%; } td { background-color:blue; min-width:100px; border-right:2px solid pink; } tr td { text-align:center; } table th, table td { border-top:2px solid OrangeRed; min-width:100px; } </style> </head> <body> <div class="container"> <table> <thead> <tr> <th class="fixed">Lorem</th> <th class="fixed">Lorem</th> <th class="fixed">Lorem</th> <th class="fluid">Lorem</th> <th class="fixed">Lorem</th> </tr> </thead> <tbody> <tr> <td>Lorem</td> <td>Lorem</td> <td>Lorem</td> <td class="fluid"> <div align="left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullam </div> </td> <td>Lorem</td> </tr> </tbody> </table> </div> </body> </html>