title: Make a popover over a table
body: <p>I want to make a popover that covers a table</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
    &lt;script src="https://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
      .popover {
        width: 2000px;
      }
      .popover-table th, td {
        padding: 0px 15px;
        white-space:nowrap;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;a href="#" data-toggle="popover4"&gt;4&lt;/a&gt;
  
    &lt;div id="popover4-html" style="display: none"&gt;
      abcdefghi:
      &lt;table class="popover-table"&gt;
        &lt;tr&gt;&lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;alongtitleisverylong&lt;/th&gt;
          &lt;th&gt;linked to event3&lt;/th&gt; 
          &lt;th&gt;100 lines&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Jill&lt;/td&gt;
          &lt;td&gt;Smith&lt;/td&gt; 
          &lt;td&gt;50&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  
    &lt;script&gt;
      $('[data-toggle="popover4"]').popover({
        html: true,
        content: function() {
        return $("#popover4-html").html()
      }});
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://jsbin.com/rorigalaxe/1/edit?html,output" rel="nofollow noreferrer">JSBin</a></p>
  
  <p>There are two problems:</p>
  
  <p>1) the width of the popover cannot cover the width of the table</p>
  
  <p>2) I don't want to bold the first row of the table, but I don't know how to do it</p>
  
  <p>Could anyone help?</p>