title: Button on table header
body: <p>I have a problem with a old site and I need to place a button in a div element, but on the top of a table.</p>
  <pre><code>&lt;div class=&quot;panel2&quot; style=&quot;border: 1px solid red;&quot;&gt;
      &lt;div id=&quot;charInfo&quot;&gt;
          &lt;input type=&quot;button&quot; id=&quot;lockList&quot; name=&quot;lockList&quot; value=&quot;Lock WL&quot; /&gt;
          &lt;table width=&quot;500px&quot; style=&quot;border:1px solid #000;border-collapse:collae;font-familyrif;font-size:80%;&quot;&gt;
              &lt;caption style=&quot;font-size:140%;padding:5px;&quot;&gt;Wish list status &lt;b&gt;Tyde&lt;/b&gt;
              &lt;/caption&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th scope=&quot;col&quot;&gt;Zone name&lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;Wish Items&lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;Received&lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;Status&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;&lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th scopre=&quot;row&quot;&gt;Heart of Fear&lt;/th&gt;
                      &lt;td align=&quot;center&quot;&gt;22&lt;/td&gt;
                      &lt;td align=&quot;center&quot;&gt;0&lt;/td&gt;
                      &lt;td align=&quot;center&quot; style=&quot;color:Green;&quot;&gt;&lt;b&gt;Active&lt;/b&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th scopre=&quot;row&quot;&gt;Mogu-shan Vaults&lt;/th&gt;
                      &lt;td align=&quot;center&quot;&gt;27&lt;/td&gt;
                      &lt;td align=&quot;center&quot;&gt;4&lt;/td&gt;
                      &lt;td align=&quot;center&quot; style=&quot;color:Green;&quot;&gt;&lt;b&gt;Active&lt;/b&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th scopre=&quot;row&quot;&gt;Throne of Thunder&lt;/th&gt;
                      &lt;td align=&quot;center&quot;&gt;45&lt;/td&gt;
                      &lt;td align=&quot;center&quot;&gt;0&lt;/td&gt;
                      &lt;td align=&quot;center&quot; style=&quot;color:Green;&quot;&gt;&lt;b&gt;Active&lt;/b&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th scopre=&quot;row&quot;&gt;Throne of Thunder (Heroic)&lt;/th&gt;
                      &lt;td align=&quot;center&quot;&gt;5&lt;/td&gt;
                      &lt;td align=&quot;center&quot;&gt;1&lt;/td&gt;
                      &lt;td align=&quot;center&quot; style=&quot;color:Red;&quot;&gt;&lt;b&gt;Not locked&lt;/b&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt; &lt;/div&gt;
  </code></pre>
  <p>I have a example here <a href="http://jsfiddle.net/TvwKz/" rel="nofollow noreferrer">http://jsfiddle.net/TvwKz/</a></p>
  <p>As you can see the button is placed to the right, but I want to have it placed on top of the table caption. Can it be done and if so how?<br />
  This is wat I want<br />
  <img src="https://i.stack.imgur.com/DBbXm.jpg"><br/><sub>(source: <a href="http://www.odinsoft.dk/download/Table.jpg" rel="nofollow noreferrer">odinsoft.dk</a>)</sub><br/></p>