javascript - How to create a responsive table using offsetWidth? -

i have angularjs application table , want obtain scenario:

first: want have fluid table using table bootstrap class;

second: after javascript changes in table head (reconstruct th) want obtain same fluid table.

my code (updated after reply post): pen

javascript

var app = angular.module("myapp",[]);  app.controller("mainctrl",['$scope', function($scope){   $scope.currentthwidth = [];   $scope.convertedwidth = [];   var helparray = [];   $scope.show = function(){     $scope.reset();     jquery('.table').find('th').each(function(index,column){       helparray.push(column.offsetwidth);       $scope.currentthwidth.push('th' + index + ': ' + ' ' + column.offsetwidth + 'px');     });   };   $scope.convert = function(){     $scope.show();     for(i in helparray){       var temp = (helparray[i]/(jquery(window).width()))*100;       // temp = translate offsetwidth in % according container's width       $scope.convertedwidth.push('th' + + ': ' + temp.tofixed(2) + '%');       jquery('table thead th:nth-child' + '(' + + ')').css('width',temp.tofixed(2) + '%');     }   };   $scope.reset = function(){     $scope.currentthwidth = [];     $scope.convertedwidth = [];     helparray = [];     jquery('table thead th').removeattr('style');   }; }]); 

question

why don't same width ? don't have same table display states. after execute javascript function th width smaller initial one. why ?

you not applying calculations th.

in example, last th never gets updated. changed for(i in helparray) jquery.each().

like :

jquery('table thead th').each(function(i, tablehead) {       $scope.convertedwidth.push('th' + + ': ' +        (helparray[i]/(jquery(window).innerwidth()))*100 + '%');       jquery(this).css('width', helparray[i] + '/' +        jquery(window).innerwidth() + '*100%');     })  

if notice i'm not using tofixed() because round numbers , mess amount of pixels browser renders. best way using natural browser calculation.

helparray[i]/jquery(window).innerwidth() + '*100%'

i let css make math due each browser render in different ways.

the output this:

<th style="width: 100/1100 * 100%;">

and full code:

var app = angular.module("myapp", []);    app.controller("mainctrl", ['$scope',    function($scope) {      $scope.currentthwidth = [];      $scope.convertedwidth = [];      var helparray = [];      $scope.show = function() {        $scope.reset();        jquery('.table').find('th').each(function(index, column) {          helparray.push(column.offsetwidth);          $scope.currentthwidth.push('th' + index + ': ' + ' ' + column.offsetwidth + 'px');        });      };      $scope.convert = function() {        $scope.show();        jquery('table thead th').each(function(i, tablehead) {          $scope.convertedwidth.push('th' + + ': ' + (helparray[i] / (jquery(window).innerwidth())) * 100 + '%');          jquery(this).css('width', helparray[i] + '/' + jquery(window).innerwidth() + '*100%');        })        };      $scope.reset = function() {        $scope.currentthwidth = [];        $scope.convertedwidth = [];        helparray = [];        jquery('table thead th').removeattr('style');      };    }  ]);

html {    padding: 0;    margin: 0;  }  table thead tr {    background: grey;    color: yellow;  }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>    <div class="container-fluid" ng-app="myapp" ng-controller="mainctrl">    <table class="table table-striped">      <thead>        <tr>          <th>th 0</th>          <th>th 1</th>          <th>th 2</th>          <th>th 3</th>        </tr>      </thead>      <tbody>        <tr>          <td>data 1</td>          <td>data 2</td>          <td>data 3</td>          <td>data 4</td>        </tr>        <tr>          <td>data 1</td>          <td>data 2</td>          <td>data 3</td>          <td>data 4</td>        </tr>        <tr>          <td>data 1</td>          <td>data 2</td>          <td>data 3</td>          <td>data 4</td>        </tr>        <tr>          <td>data 1</td>          <td>data 2</td>          <td>data 3</td>          <td>data 4</td>        </tr>        <tr>          <td>data 1</td>          <td>data 2</td>          <td>data 3</td>          <td>data 4</td>        </tr>      </tbody>    </table>    <button class="btn btn-primary" ng-click="show()">show offsetwidth</button>    <button class="btn btn-success" ng-click="convert()">convert %</button>    <button class="btn btn-warning" ng-click="reset()">reset widths</button>    <h2 style="color:#337ab7;">current table head offset-width: {{currentthwidth}}</h2>    <h2 style="color:#5cb85c;" ng-if="convertedwidth.length">converted width %: {{convertedwidth}}</h2>  </div>