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

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

serialization - Convert Any type in scala to Array[Byte] and back -

SonarQube Plugin for Jenkins does not find SonarQube Scanner executable -