title: Table footer always at bottom and horizontal scrolling?
body: <p>How to <em>footer</em> float to bottom and horizantal scroll working correctly with <strong>thead</strong> and <strong>tbody</strong> ?</p>
  <p>I tried to it, But it dont work horizontal  scroll correctly when footer position:fixed , position:absolute and other state.And is it Possible to work without  tbody:after css ?</p>
  <pre><code> &lt;body&gt;
                  &lt;table&gt;&lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th&gt;Month&lt;/th&gt;
                        &lt;th&gt;Savings&lt;/th&gt;
                        &lt;th&gt;TestHeader1&lt;/th&gt;
                        &lt;th&gt;TestHeader2&lt;/th&gt;A
                        &lt;th&gt;TestHeader3&lt;/th&gt;
                        &lt;th&gt;TestHeader4&lt;/th&gt;
                        &lt;th&gt;TestHeader5&lt;/th&gt;
                        &lt;th&gt;TestHeader6&lt;/th&gt;
                        &lt;th&gt;TestHeader7&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                      &lt;tr&gt;
                        &lt;td&gt;January&lt;/td&gt;
                        &lt;td&gt;100&lt;/td&gt;
                        &lt;td&gt;101&lt;/td&gt;
                        &lt;td&gt;102&lt;/td&gt;
                        &lt;td&gt;103&lt;/td&gt;
                        &lt;td&gt;104&lt;/td&gt;
                        &lt;td&gt;105&lt;/td&gt;
                        &lt;td&gt;106&lt;/td&gt;
                        &lt;td&gt;107&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                        &lt;td&gt;February&lt;/td&gt;
                        &lt;td&gt;80&lt;/td&gt;
                        &lt;td&gt;81&lt;/td&gt;
                        &lt;td&gt;82&lt;/td&gt;
                        &lt;td&gt;83&lt;/td&gt;
                        &lt;td&gt;84&lt;/td&gt;
                        &lt;td&gt;85&lt;/td&gt;
                        &lt;td&gt;86&lt;/td&gt;
                        &lt;td&gt;87&lt;/td&gt;
                      &lt;/tr&gt;
                    &lt;/tbody&gt;
                    &lt;tfoot&gt;
                      &lt;tr&gt;
                        &lt;td&gt;Sum&lt;/td&gt;
                        &lt;td&gt;180&lt;/td&gt;
                        &lt;td&gt;182&lt;/td&gt;
                        &lt;td&gt;184&lt;/td&gt;
                        &lt;td&gt;186&lt;/td&gt;
                        &lt;td&gt;188&lt;/td&gt;
                        &lt;td&gt;190&lt;/td&gt;
                        &lt;td &gt;&lt;/td&gt;
                        &lt;td &gt;194&lt;/td&gt;
                      &lt;/tr&gt;
                   &lt;/tfoot&gt;
                  &lt;/table&gt;
                  &lt;/body&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/3DvyC.png" rel="nofollow noreferrer">Image</a></p>
  <p>styles
  
  html,
  body {
  height: 100%;
  margin: 0;
  }</p>
  <pre><code>table, th, td {
    border: 1px solid black;
  }
   tbody:after
      {
          background-color:orange;
          height:100px;
          content: &quot;&quot;;
          display: block;
      }
  &lt;/style&gt;
  </code></pre>