title: Correct way to style bootstrap Table Header?
body: <p>My question is about the table header. I am using the table to ask questions and provide answer options. </p>
  
  <p>My current set up is this: </p>
  
  <pre><code>&lt;div class="container sectionOne"&gt;
     &lt;div class="row"&gt;
        &lt;div class="col-lg-12 col-xs-12"&gt;
           &lt;table class="table table-bordered table-responsive table-hover"&gt;
              &lt;tr&gt;
                 &lt;th&gt;When meeting a new employee, their first impression of me would be that I am:&lt;/th&gt;
              &lt;/tr&gt;
           &lt;/table&gt;
           &lt;table class="table table-bordered table-responsive table-hover"&gt;
              &lt;td&gt;Option 1&lt;/td&gt;
              &lt;td&gt;Option 2&lt;/td&gt;
              &lt;td&gt;Option 3&lt;/td&gt;
              &lt;td&gt;Option 4&lt;/td&gt;
           &lt;/table&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>While this works perfectly for what I'm trying to do I'm trying to figure out if there is a better way to handle it. If you notice I'm calling the following code twice. </p>
  
  <blockquote>
    <p><code>&lt;table class="table table-bordered table-responsive table-hover"&gt;</code></p>
  </blockquote>
  
  <p>The reason I'm doing this is to avoid this look: <a href="https://jsfiddle.net/xfykp03c/" rel="nofollow">https://jsfiddle.net/xfykp03c/</a></p>
  
  <p><strong>Is there a better way to handle making the header take up the entire top row without effecting the other rows? Thanks!</strong></p>