After javascript changed the width of the table

I have this CSS. I know where the problem is but I can't fix it.

    <style type="text/css">

#etera{
    margin-left: 3%;
    margin-top: 6%;
    position: absolute;
}
 table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 2px solid black;
 }
thead, tbody, tr, td, th { box-sizing: border-box;display: block; } ***********//problem
.table tr:after {
 content: ' ';
 display: block;
visibility: hidden;
clear: both;
}
.table thead th { 
height: 30px;
line-height: 30px;
/*text-align: left;*/
 }
 /*any os other than mac*/
.table tbody {
 height: 300px;
 overflow-y: auto;
 width: 100%;
 }
/*any os other than mac*/
 .table thead {
 width: 100%;
 padding-right: 17px;
 background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%); 
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05,  #003366), color-stop(1, #003f7f) );                       


background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366",

    endColorstr="#003f7f");  background: -o-linear-gradient(top,#003366,003f7f);
  background-color:#003366;}

.table tbody { border-top: 2px solid black; }
table td{ //*****************************problem
    width: 20%;
    float: left;
    border-right: 1px solid black;
}
 table th{ ****************************** //problem
    width: 20%;
    float: left;
}
.table--class tr:hover td{
  background-color:#cccccc;
}
.table--class td{
  vertical-align:middle;
  background-color:rgba(120,150,150,.98);
  border:1px solid #4c7299;
  border-width:0px 1px 1px 0px;
  text-align:center;
  padding:7px;
  font-size:14px;
  font-family:Arial;
  font-weight:bold;
  color:rgba(80,0,20,1);
}.table--class tr:last-child td{
  border-width:0px 1px 0px 0px;
}.table--class tr td:last-child{
  border-width:0px 0px 1px 0px;
}.table--class tr:last-child td:last-child{
  border-width:0px 0px 0px 0px;
}
.table--class tr:first-child th{
  text-align:center;
  border-width:0px 0px 1px 1px;
  font-size:20px;
  font-family:Arial Black;
  font-weight:bold;
  color:#1d53e5;
}
.table--class tr:first-child:hover th{
}
.table--class tr:first-child th:first-child{
  border-width:0px 0px 1px 0px;
}
.table--class tr:first-child th:last-child{
  border-width:0px 0px 1px 1px;
}
tbody td:last-child, thead th:last-child {
    border-right: none;
}
</style>

Also I have the below script for search on the table:

     <script type="text/javascript">
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
 var _input;
 function _onInputEvent(e) {
        _input = e.target;
        var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
        Arr.forEach.call(tables, function(table) {
            Arr.forEach.call(table.tBodies, function(tbody) {
                Arr.forEach.call(tbody.rows, _filter);
            });
        });
    }
    function _filter(row) {
        var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
        row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
    }
    return {
        init: function() {
            var inputs = document.getElementsByClassName('light-table-filter');
            Arr.forEach.call(inputs, function(input) {
                input.oninput = _onInputEvent;
            });
        }
    };
})(Array.prototype);
document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
        LightTableFilter.init();
    }
});
})(document);
</script>

My code works fine like as shown in this image but when I search it looks like this.