html - Table with fixed-width columns - without specifying table width -
i'm looking way create table fixed-width cells. when window narrow, horizontal scroll bar should appear.
in example, there 2 400px columns, therefore table should 800px wide. when screen width less 800px, horizontal scrollbar appear. that's exact behavior, i'm looking for: http://jsbin.com/xeniwovole/edit?html,css,output
and question: can done without specifying table width? in real life, table have dynamic amount on columns , column widths responsive. therefore, it's not reasonable try calculate table width sum of column widths.
use min-width
, max-width
rather width
on table cells. prevent table resizing <td>
fit table @ 100% width, default behaviour.
#wrap { overflow-x: auto; } table { table-layout: fixed; width: auto; } td { background-color: yellow; min-width: 400px; max-width: 400px; }
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>js bin</title> </head> <body> <div id="wrap"> <table> <tr> <td>first</td> <td>second</td> </tr> </table> </div> </body> </html>
Comments
Post a Comment