ブートストラップテーブルヘッダのスタイルを修正する正しい方法は？

Question

私の質問はテーブルのヘッダーについてです。私はテーブルを使って質問し、回答オプションを提供しています。これは私がそれを処理するためのより良い方法があるかどうかを把握しようとしている何をしようとしているために完璧に動作しますが

<div class="container sectionOne"> 
    <div class="row"> 
     <div class="col-lg-12 col-xs-12"> 
     <table class="table table-bordered table-responsive table-hover"> 
      <tr> 
       <th>When meeting a new employee, their first impression of me would be that I am:</th> 
      </tr> 
     </table> 
     <table class="table table-bordered table-responsive table-hover"> 
      <td>Option 1</td> 
      <td>Option 2</td> 
      <td>Option 3</td> 
      <td>Option 4</td> 
     </table> 
     </div> 
    </div> 
</div> 

：

私の現在のセットアップはこれです。私が次のコードを2度呼んでいることに気づいた場合。

<table class="table table-bordered table-responsive table-hover">

私はこれをやっている理由は、この外観を避けるためです：https://jsfiddle.net/xfykp03c/

は、ヘッダは影響を与えずに全体の一番上の行を取る作る処理するためのより良い方法はあります他の行？ありがとう！

Answer 1

あなたはこの効果があると思いますか？ https://jsfiddle.net/xfykp03c/2/

はちょうど私が簡単なことだったわからなかったすべての4列

<div class="container sectionOne"> 
    <div class="row"> 
    <div class="col-lg-12 col-xs-12"> 
     <table class="table table-bordered table-responsive table-hover"> 
     <tr> 
      <th colspan="4">When meeting a new employee, their first impression of me would be that I am:</th> 
     </tr> 
     <tr> 
      <td>Option 1</td> 
      <td>Option 2</td> 
      <td>Option 3</td> 
      <td>Option 4</td> 
     </tr> 
     </table> 

    </div> 
    </div> 
</div>