title: Horizontally and vertically responsive table with sticky/fixed headers?
body: <p>On a page on a website I'm building, there will only be a table displayed. I want that table to stick to the edges of the screen regardless of the width/height of the screen.</p>
  
  <p>This table also needs to have sticky/fixed headers (so when they scroll down, the headers are still visible), which I'm finding complicates things as the widths and heights seemingly need to be set manually.</p>
  
  <p>Also, it needs to be able to be horizontally scrollable in case there's a ton of columns. I don't want them all to be 10px wide, but the table itself still needs to stick to the edges of the screen as the dimensions change.</p>
  
  <p>It works with keeping the headers sticky as the user scrolls, but the width and height of the elements have to all be set manually, which means it's not responsive whatsoever.</p>
  
  <p>Is this possible at all? I'm not averse to JavaScript, but a pure CSS solution would be slightly preferred.</p>
  
  <p>(<a href="http://jsfiddle.net/533bLyj6/2/" rel="nofollow">JSFiddle</a>)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
  }
  table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 375px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-border-horizontal-spacing: 0;
  }
  th,
  td {
    text-align: left;
    padding: 10px 10px;
    width: 105px;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  thead {
    background-color: black;
    color: #fff;
  }
  thead tr {
    display: block;
    position: relative;
  }
  tbody {
    display: block;
    overflow: auto;
    height: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Longer title for testing&lt;/th&gt;
        &lt;th&gt;Color&lt;/th&gt;
        &lt;th&gt;Description&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to&lt;/td&gt;
        &lt;td&gt;Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr&lt;/td&gt;
        &lt;td&gt;These are red.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Pear&lt;/td&gt;
        &lt;td&gt;Green&lt;/td&gt;
        &lt;td&gt;These are green.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Grape&lt;/td&gt;
        &lt;td&gt;Purple / Green&lt;/td&gt;
        &lt;td&gt;These are purple and green.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Orange&lt;/td&gt;
        &lt;td&gt;Orange&lt;/td&gt;
        &lt;td&gt;These are orange.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Banana&lt;/td&gt;
        &lt;td&gt;Yellow&lt;/td&gt;
        &lt;td&gt;These are yellow.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Kiwi&lt;/td&gt;
        &lt;td&gt;Green&lt;/td&gt;
        &lt;td&gt;These are green.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Plum&lt;/td&gt;
        &lt;td&gt;Purple&lt;/td&gt;
        &lt;td&gt;These are Purple&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Watermelon&lt;/td&gt;
        &lt;td&gt;Red&lt;/td&gt;
        &lt;td&gt;These are red.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Tomato&lt;/td&gt;
        &lt;td&gt;Red&lt;/td&gt;
        &lt;td&gt;These are red.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Cherry&lt;/td&gt;
        &lt;td&gt;Red&lt;/td&gt;
        &lt;td&gt;These are red.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Cantelope&lt;/td&gt;
        &lt;td&gt;Orange&lt;/td&gt;
        &lt;td&gt;These are orange inside.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Honeydew&lt;/td&gt;
        &lt;td&gt;Green&lt;/td&gt;
        &lt;td&gt;These are green inside.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Papaya&lt;/td&gt;
        &lt;td&gt;Green&lt;/td&gt;
        &lt;td&gt;These are green.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Raspberry&lt;/td&gt;
        &lt;td&gt;Red&lt;/td&gt;
        &lt;td&gt;These are red.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Blueberry&lt;/td&gt;
        &lt;td&gt;Blue&lt;/td&gt;
        &lt;td&gt;These are blue.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Mango&lt;/td&gt;
        &lt;td&gt;Orange&lt;/td&gt;
        &lt;td&gt;These are orange.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Passion Fruit&lt;/td&gt;
        &lt;td&gt;Green&lt;/td&gt;
        &lt;td&gt;These are green.&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>