<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
  *{
     margin: 0;
 }

#s2{
    height: 500px;
    width: 500px;
}

#s2{
    display: flex;
    flex-direction: column;
    justify-content: center;
}




#dd{
    background: #ffec8b;
    border-radius: 6px;
    padding: 2%;

    margin: 0 auto;

font-family: 'Roboto', sans-serif;
  font-size: 50px;
}

#dd{
    display: flex;
    flex-flow: column;
    justify-content: space-between;


}

.string2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.string2 div{

    background: #a85418;
    border-radius: 5px;
    position:   relative;
}

.string2 input{
    
    height: 93%;
    width: 93%;
    border-radius: 4px;
    background-color: transparent;
    overflow: auto;
    border: none;

    position: absolute;

	font-family:inherit; 

    color: floralwhite;
    text-transform: uppercase;
    text-align:  center;

    font-size: inherit;
}
</style>
<!------------------------------------------------------------------------------------------------------------------------------------>


        <div id="s2">

            <div id="dd">

            </div>
        </div>

<!------------------------------------------------------------------------------------------------------------------------------------>

<script>
var sizeTable=5; 
  
window.onload = function(){
  
    var dd=document.getElementById('dd');
    var set="";
    var input = "<input type=\"text\" maxlength=\"1\" id=\"i";
    var string2="<div class=\"string2\" style=\"height: 18%; width: 100%;\">";
    var div="\" style=\"height: 99%; width: 17.8%; padding: 0.6%;\">";
	var we="";
    

    dd.style.cssText="height: 72.8%; width: 72.8%;"+we;/* font-size: "+wer/13.68+"px;";*/
            
            
  
//Создание новой таблицы
    for (var r = 1; r <= sizeTable; r++) {
        set+=string2;
        for (var c = 1; c <= sizeTable; c++) {
            set+="<div id=\""+r+c+div+input+r+c+"\">"+"</div>";
        }
        set+="</div>";
    }
    dd.innerHTML =set; 
  }

</script>