Albert Albert - 24 days ago 8
CSS Question

How to change height of the rows of a responsive table using divs

I'm trying to create a responsive table (a simple keyboard) but only the cells are being resized. I want the full keyboard to be displayed in the screen without having to scroll.

This is my code: https://jsfiddle.net/723ar2f5/2/embedded/result/

#teclat {
display: table;
table-layout: fixed;
border-spacing:5px;
position: absolute;
height: 100%;
}
#lletra {
font-family: Verdana;
font-size: 9vw;
}
.fila {
display: table-row;
}

.fila div {
display: table-cell;
}
.tecla {
width: 100%;
height: 100%;
}


It looks fine if the screen is big enough but not in mobile screens.

Answer

Try something along this.

.tecla {
    width: 100%;
    height: 13vw;
}

Full code and DEMO jsfiddle

 function esborra(tot) {
  var text = document.getElementById('text');
  if (tot == "s")
   text.value = "";
  else
   text.value = text.value.slice(0,-1);
 }
 window.onload = function(e){
   setTimeout(window.scrollTo(0,1),10);

   var elements = document.getElementsByClassName('tecla');
   for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('click', (function(i) {
        return function() {
          document.getElementById('text').value = document.getElementById('text').value + this.getElementById('lletra').textContent;
        };
      })(i), false);
   }
 }
  body {
    height: 100%;
    width: 100%;
  }
  #teclat {
    /* display: table; */
    /* table-layout: fixed; */
    /* border-spacing: 5px; */
    /* position: relative; */
    height: 100vh;
  }
  #lletra {
    font-family: Verdana;
    font-size: 9vw;
  }
  .fila {
    display: table-row;
  }

  .fila div {
    display: table-cell;
  }
.tecla {
    width: 100%;
    height: 13vw;
}
  .tecla_marc {
    fill: red;
    stroke:black;
    stroke-width:5;
    opacity:0.5;
  }
<body>
<input type="text" id="text" style="width: 60%" readonly/><button type="button" onclick="esborra('1')"></button><button type="button" onclick="esborra('s')">Esborra</button><br/>
<div id="teclat">
<div class="fila">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">A</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">B</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">C</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">D</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">E</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">F</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">G</text>
</svg>
</div>
</div>

<div class="fila">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">H</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">I</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">J</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">K</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">L</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">M</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">N</text>
</svg>
</div>
</div>

<div class="fila">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">O</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">P</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">Q</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">R</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">S</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">T</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">U</text>
</svg>
</div>
</div>

<div class="fila">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">V</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">W</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">X</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">Y</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">Z</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">&nbsp;</text>
</svg>
</div>
</div>