JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Caption Default <code>display:table-caption</code></h1>      
<table summary="Summary of Table Data">
        <caption>Caption for Table</caption>
        <thead><tr><th>Sun</th><th>Mon</th><th>Tues</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead>
        <tfoot><tr><td colspan="7"><p>Table Footer</p></td></tr></tfoot>    
        <tbody>
          <tr><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td></tr>        
          <tr><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
          <tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr>
           <tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
          <tr><td>29</td><td>30</td><td>31</td><td>00</td><td>00</td><td>00</td><td>00</td></tr>
          <tr><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td></tr>
        </tbody>
      </table>
<hr />
<h1>Caption set to <code>display:table-header-group</code></h1>
      <table summary="Summary of Table Data">
        <caption class="captionx">Caption for Table</caption>
        <thead><tr><th>Sun</th><th>Mon</th><th>Tues</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead>
        <tfoot><tr><td colspan="7"><p>Table Footer</p></td></tr></tfoot>    
        <tbody>
          <tr><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td></tr>        
          <tr><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
          <tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr>
           <tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
          <tr><td>29</td><td>30</td><td>31</td><td>00</td><td>00</td><td>00</td><td>00</td></tr>
          <tr><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td></tr>
        </tbody>
     ...

CSS

table{
  border-collapse:collapse; 
  border-spacing:0; 
  padding-top:0.5em; 
  padding-bottom:0.5em; 
  margin:0.8em auto; 
  -moz-box-shadow:0 0 4px #000; -ms-box-shadow:0 0 4px #000; -o-box-shadow:0 0 4px #000; -webkit-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000; 
  color:#000; 
  width:80%
  }
.captionx{display:table-header-group}

table#test {
    position: relative;
    padding-top: 20px;
}

table#test caption {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    line-height: 20px;
}
table#test thead {
    position: absolute;
    top: 20px;
}