AndrewLeonardi AndrewLeonardi - 3 months ago 24
CSS Question

Correct way to style bootstrap Table Header?

My question is about the table header. I am using the table to ask questions and provide answer options.

My current set up is this:

<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>


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.


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



The reason I'm doing this is to avoid this look: https://jsfiddle.net/xfykp03c/

Is there a better way to handle making the header take up the entire top row without effecting the other rows? Thanks!

Answer

I think you are going for this effect? https://jsfiddle.net/xfykp03c/2/

Just restructure the HTML like this using colspan="4" to stretch the header all 4 columns

<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>
Comments