javascript - Proportionately increasing columns width -

let's have number of columns of different width e.g.:

|    100   |     200     |  55  |          450          |    empty space          

and need adjust width of every column way entire row fits in container, , takes 100%.

i of course set .row { max-width: 100% } , set widest column 100%, want make way every column takes available space proportionally. ideas?

you can use both display: table , display: table-cell.

as example:

* {      box-sizing: border-box;  }  html, body {      width: 100%;  }  div {      width: 100%;      min-width: 100;      display: table;  }  div > div {      min-width: auto;      width: auto;      display: table-cell;      border-right: 1px solid #000;      text-align: center;  }  div > div:first-of-type {      border-left: 1px solid #000;  }

<div>      <div>abcde</div>      <div>fg</div>      <div>hijklm</div>      <div>n</div>      <div>opq</div>      <div>rstuvwx</div>      <div>yz</div>  </div>

demo