How to change table height?

Asked

Viewed 125 times

0

I am developing the website of the company where I work and I need the table of downloads that appears on website fill the whole screen. I imagine that the height would have to be at 100%, but when I make that change, nothing happens.

<table style="width: 100%;height: 100%" align='center' border='1' cellpadding='0' cellspacing='0'>
html css

  • post your entire code, heigth: 100%, depends on the containers to work.

  • 1

    You can use it height: 100vh;

  • The code is too long to put here... just go to the page and give Ctrl + U.

  • @Rafaelaugusto, worked partially... Now it would be necessary to eliminate the white spaces above and below the table.

  • @Rafaelaugusto, how can I align the cell text downwards? <td style:'vertical-align: bottom'>

  • I got... <td style='vertical-align: bottom'>

  • for vh support on browsers go to http://caniuse.com/viewport-units/embed/

Show 2 more comments

1 answer

0


The height is related to container in which the element is contained.

whereas the container of your table is the body document, it is necessary that the document also has 100% height. For this, a way to define the height height=100% of the document (body, html) is apply in CSS:

<style>
html, body{ height: 100%; }
</style>

In this way, your table with height:100% will be the same height as the document (browser visible area).

You can also use the 100vh in the element (height:100vh), but some older browsers do not support this value vh (ex. 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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.