title: HTML header associated with table
body: <p>I have a table with an uncertain amount of entries; on printable PDF pages I want that this table jumps to the next page when it doesn't fit on one page anymore, rather than cutting through the middle and this works well. However, i have a table name/description that says something about the table that I want to associate with the table and that jumps along with it, whenever the table jumps to the next page. Any idea on how to accomplish this?
  Sorry if this seems trivial I'm not a CSS/HTML Guru any help will be greatly appreciated.</p>
  
  <p>Here's what I have: I know there should be a body in the table but for some reason that doesn't go well with the tool I'm using</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.table_position
  {
          table-layout:fixed;
          margin-top:15px;
          margin-bottom:15px;
          float:left;
          vertical-align:top; 
          position:relative;
          width:100%;
          page-break-inside:avoid !important;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="table_position"&gt;
          &lt;span style="margin-left: 2%; color:rgb(245,132,31);"&gt;sample description&lt;/span&gt;
          &lt;table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin-left:2%; width:93%;" svmx-data="{{$sample_data}}" width="100%"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th class="theader" svmx-data="{{$sample_date}}" width="35%"&gt;
                          &lt;span&gt;date&lt;/span&gt;&lt;/th&gt;
                      &lt;th class="theader" svmx-data="{{$sample_type}}" width="40%"&gt;
                          &lt;span&gt;type&lt;/span&gt;&lt;/th&gt;
                      &lt;th class="theader" svmx-data="{{$sample_quan}}" width="25%"&gt;
                          &lt;span&gt;quantity&lt;/span&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>jsFiddle</strong> <a href="http://jsfiddle.net/0wdr69cz/" rel="nofollow">http://jsfiddle.net/0wdr69cz/</a></p>