Stretch a div element throughout the table extension

Navigation
1

I have a table with many columns that pop out of the screen. Above this table I have a div with a h2 . I'm not getting div to expand beyond the screen to cover the full width of the table. Example, to better demonstrate the situation: jsfiddle
I know that if I put the title as a table row, it would look the way I would want it, but I intend to use a div , so the code gets better organized. Someone can help me.

Example: 

.colorir{
    padding: 5px;
    background: #003686;
    color: white;
<div class="colorir">
 <h2>Este é o titulo que pretendo esticar até ao fim da tabela</h2>
</div>
<br>
<table>
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th>Four</th>
      <th>Five</th>
      <th>Six</th>
      <th>Seven</th>
      <th>Eight</th>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th>Four</th>
      <th>Five</th>
      <th>Six</th>
      <th>Seven</th>
      <th>Eight</th>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th>Four</th>
      <th>Five</th>
      <th>Six</th>
      <th>Seven</th>
      <th>Eight</th>

    </tr>
  </thead>

  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
      <td>Seven</td>
      <td>Eight</td>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
      <td>Seven</td>
      <td>Eight</td>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
      <td>Seven</td>
      <td>Eight</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
      <td>Seven</td>
      <td>Eight</td>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
      <td>Seven</td>
      <td>Eight</td>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
      <td>Seven</td>
      <td>Eight</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
      <td>Seven</td>
      <td>Eight</td>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
      <td>Seven</td>
      <td>Eight</td>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
      <td>Seven</td>
      <td>Eight</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
      <td>Seven</td>
      <td>Eight</td>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
      <td>Seven</td>
      <td>Eight</td>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
      <td>Seven</td>
      <td>Eight</td>
    </tr>
  </tbody>
</table>
    
asked by anonymous 07.12.2016 / 16:55

1 answer

0

Use the caption element to wrap div .

Following the suggestion of @GuilhermeNascimento, you can do this: 

<table>
    <caption style="background-color:#003686; height:77px;color:white; text-align:left; vertical-align: middle;">
        <div>
            <h2>Este é o titulo que pretendo esticar até ao fim da tabela</h2>
        </div>
    </caption><br>
    <thead>
    	<tr>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
            <th>Five</th>
            <th>Six</th>
            <th>Seven</th>
            <th>Eight</th>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
            <th>Five</th>
            <th>Six</th>
            <th>Seven</th>
            <th>Eight</th>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
            <th>Five</th>
            <th>Six</th>
            <th>Seven</th>
            <th>Eight</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
 			<td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
            <td>Six</td>
            <td>Seven</td>
            <td>Eight</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
            <td>Six</td>
            <td>Seven</td>
            <td>Eight</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
            <td>Six</td>
            <td>Seven</td>
            <td>Eight</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
            <td>Six</td>
            <td>Seven</td>
            <td>Eight</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
            <td>Six</td>
            <td>Seven</td>
            <td>Eight</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
            <td>Six</td>
            <td>Seven</td>
            <td>Eight</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
            <td>Six</td>
            <td>Seven</td>
            <td>Eight</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
            <td>Six</td>
            <td>Seven</td>
            <td>Eight</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
            <td>Six</td>
            <td>Seven</td>
            <td>Eight</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
            <td>Six</td>
            <td>Seven</td>
            <td>Eight</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
            <td>Six</td>
            <td>Seven</td>
            <td>Eight</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
            <td>Six</td>
            <td>Seven</td>
            <td>Eight</td>
    	</tr>
	</tbody>
</table>
    
07.12.2016 / 16:59
Using Access to Export in Excel, Parameterized Query Pause a gif in a given frame, similar to facebook