title: Make HTML table always fit screen both vertically and horizontally, without scroll bar
body: <p>Is there any way to make sure that HTML &lt;table&gt; always fits screen both in width and height? And no scroll bar must appear.</p>
  <p>For example this table:</p>
  <pre><code>    &lt;style&gt;
          p {
              font-size: 9px;
              padding: 2px;
          }
  
          body,
          td,
          th {
              font-family: &quot;Times New Roman&quot;, Times, serif;
              font-size: 9px;
          }
  
          th, td {
              border: 1px solid black;
              border-collapse: collapse;
          }
  
          table {
              border-collapse: collapse;
          }
  
          table tr td {
              width: 50%;
              position: relative;
          } 
  
          table {
              max-height: 40vw;
          }
  
      &lt;/style&gt;
      &lt;table width=&quot;88%&quot;&gt;
          &lt;thead&gt;
          &lt;tr style=&quot;border: none!important;&quot;&gt;
              &lt;th colspan=&quot;2&quot; style=&quot;border: none!important;&quot;&gt;
                  logo
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th colspan=&quot;2&quot;&gt;
                  &lt;p&gt;title &lt;/p&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
  
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
  
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
  
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
  
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
  
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
  
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
  
              &lt;td&gt;
                  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;p&gt;
                      asdaspodiasdkas kajdklsaj kldlasj kasl
                  &lt;/p&gt;
              &lt;/td&gt;
  
              &lt;td&gt;
                  
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  <p>If width is decreased enough, height will increase and scroll bar will appear. In my case, instead of height increasing, table itself must fit into height and width of screen.</p>
  <p>Edit: This table used in mobile app, and it has a preview button. When pressed, a popup with a size that is half of a screen shows up and my table must fit in this box. Moreover, when pressed &quot;view&quot; button table shows up in a full screen mode. What i am failing to achieve is that in a preview mode, half of a table shows up, and there is no scroll bar over here.</p>