HTML CSS examples for CSS Widget:Table
prevent table with overflow in flexbox
<html lang="en"> <head> <title>Nested flexbox issue</title> <style> body {<!--from w w w .j av a 2 s. co m--> box-sizing : border-box; } .sidebar { padding: 1rem; } .outer-container { display: flex; width: 100%; } .container { width: 100%; display: flex; } table th, table td { text-align: left; padding: .5rem; } .left, .right { padding: 1rem; overflow: auto; } .left { flex: 1; background: #ccc; } .right { } table { table-layout: fixed; width: 100%; } tr { display: table-row-group; } </style> </head> <body translate="no"> <div class="outer-container"> <div class="sidebar"> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five Six Seven</li> <li>Wwwwwwwwwwwwww</li> </ul> </div> <div class="container"> <div class="left"> <table> <tbody> <tr> <th>Name</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Name</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Name</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> <td>Yellow</td> <td>Yellow</td> <td>Bob</td> <td>Yellow</td> <td>Yellow</td> <td>Yellow</td> <td>Bob</td> <td>Yellow</td> <td>Yellow</td> <td>Yellow</td> <td>Bob</td> <td>Yellow</td> <td>Yellow</td> <td>Yellow</td> <td>Bob</td> <td>Yellow</td> <td>Yellow</td> <td>Yellow</td> <td>Bob</td> <td>Yellow</td> <td>Yellow</td> <td>Yellow</td> <td>Bob</td> <td>Yellow</td> <td>Yellow</td> <td>Yellow</td> <td>Bob</td> <td>Yellow</td> <td>Yellow</td> <td>Yellow</td> <td>Bob</td> <td>Yellow</td> <td>Yellow</td> <td>Yellow</td> </tr> </tbody> </table> </div> <div class="right"> this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test </div> </div> </div> </body> </html>