Browser window height and width calculations scrolling table

In this example below you will see how to do a Browser window height and width calculations scrolling table with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mush_el, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mush_el ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Browser window height and width calculations scrolling table</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <main>
  <div class="container" id="toolbar">
       <p>Some easy way to calculate the width and height of a window :)</p>
    <p>I needed to find the actual size of the browser window to allow a table to scroll responsively this is the simplest answer I found:</p>
    <span id="size_w"></span>
    <span id="size_h"></span>
    <span id="size_table"></span>
    <span id="size_th"></span>
    <span id="size_tbar"></span>
    <span id="size_max"></span>
   
  </div>
<div class="container">
  <div id="table_responsive">
    <div id="scroll_inside">
  <table id="tbl_head">
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
        <th>d</th>
        <th>e</th>
        <th>f</th>
        <th>g</th>
        <th>h</th>
        <th>i</th>
        <th>j</th>
      </tr>
    </thead>
  
 

    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>0</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>0</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>0</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>0</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>0</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>0</td>
      </tr>
    </tbody>
   </table>
    </div>
   <table>
    <tfoot>
      <tr>
        <th colspan="6">f</th>
        <th>g</th>
        <th>h</th>
        <th>i</th>
        <th>j</th>
      </tr>
    </tfoot>
  </table>
</div>  
 </div> 
</main>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mush_el/browser-window-height-and-width-calculations-scrolling-table-LRZjdk */
body {
  padding: 20px;
  box-sizing: border-box;
}
.container table {
  margin: 0px auto;
  width: 100%;
  box-sizing: border-box;
}
#toolbar {
  box-sizing: border-box;
}
/*#table_responsive {
  overflow-x: auto;
  overflow-y: hidden;
}*/
#scroll_inside {
  overflow-y: auto;
  max-width: 100%;
  overflow-x: visible;
}

table td {
  border: 2px solid #bada55;
  padding: 20px 30px;
  box-sizing: border-box;
}
table th {
  background: #222;
  border-left: 2px solid #f0c;
  border-right: 2px solid #f0c;
  border-top: 2px solid #222;
  border-bottom: 2px solid #222;
  color:  #f0c;
  padding: 20px 30px;
  box-sizing: border-box;
}

td, th {
  width: 10%;
}
thead, tfoot {

}

/*Downloaded from https://www.codeseek.co/mush_el/browser-window-height-and-width-calculations-scrolling-table-LRZjdk */
var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    gt = d.getElementById('scroll_inside'),
    gth = d.getElementsByTagName('thead')[0],
    gtbar = d.getElementById('toolbar'),
    x = w.innerWidth|| e.clientWidth|| g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight,
    tbl = gt.innerHeight|| gt.clientHeight,
    th = gth.innerHeight|| gth.clientHeight,
    tbar = gtbar.innerHeight|| gtbar.clientHeight + 20,//it didn't add the correct amount for some reason it was calc 60
    maxheight = y - (tbar + (th * 1.5));

function t(){
    size_w.innerHTML = "x = "+x;
    size_h.innerHTML = " | y = "+y;
    size_table.innerHTML = " | tbody height = "+tbl;
    size_th.innerHTML = " | thead height = "+th;
    size_tbar.innerHTML = " | toolbar height = "+tbar;
    size_max.innerHTML = " | calculated table height = "+maxheight;
};
function maxtable() {
 $('#scroll_inside').css('max-height' , maxheight + 'px');  
}; 
console.log(maxheight);


window.onload = t;
window.onresize = t;
window.onload = maxtable;
window.onresize = maxtable;

Comments