jquery - 设置 Bootstrap 表头样式的正确方法？

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>

虽然这非常适合我正在尝试做的事情，但我正在尝试找出是否有更好的方法来处理它。如果您注意到我两次调用以下代码。

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

我这样做的原因是为了避免这种情况:https://jsfiddle.net/xfykp03c/

是否有更好的方法来处理使标题占据整个顶行而不影响其他行的问题？谢谢!

Answer 1

我想你是为了这个效果？ https://jsfiddle.net/xfykp03c/2/

只需像这样使用 colspan="4" 来重组 HTML 来拉伸(stretch)标题的所有 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>