The height
is relative to the container where the element is contained.
Considering that the container of your table is the body
of the document itself, it is necessary that the document also has 100% height. To do this, one way to set the% height of the document ( body, html ) is to apply in CSS:
<style>
html, body{ height: 100%; }
</style>
In this way, your table with height=100%
will have the same document height (visible area of the browser).
You can also use height:100%
in element ( 100vh
), but some older browsers do not support this height:100vh
value (eg Safari for Windows, Safari, and Chrome on older iPhones) .
Another solution with jQuery without the CSS mentioned above:
<table id="id_tabela" style="width: 100%;" align='center' border='1' cellpadding='0' cellspacing='0'>
<script>
$(window).on('load resize',function(){
$("#id_tabela").css("height",window.innerWidth+"px");
});
</script>