title: how to create dropdown option in bootstrap table <th>
body: <p>I am trying to make a dropdown in table header like this-</p>
  
  <p>Dropdown Example
                    </p>
  
  <pre><code>              &lt;ul class="dropdown-menu" id="dropEmail" style="position:relative;    z-index: 99999;"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
  
  &lt;table id="example3" class="table table-bordered table-striped" style=" overflow-x: scroll;" &gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th class="dropdown"&gt; &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle"&gt;Messages &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Inbox&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Drafts&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Sent Items&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Trash&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody &gt;
          &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>But in the front end screen the drop down goes to the back of table body. Setting z- index to 9999 and position relative is not working even.</p>