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，以扩展标题全部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>

样式引导程序表头的正确方法？

1 个答案: