Stretch an element div over the entire length of the table

Asked

Viewed 215 times

1

I have a table with many columns that leave the screen of the screen. Above this table I have a div with a h2. I’m not getting that div expands beyond the screen to cover the entire width of the table. Example, to better demonstrate the situation: jsfiddle
I know that if I put the title as if it were a row of the table, it would look as it would, but I intend to use a div, for the code to be 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>

html css table

1 answer

0


Use the element caption to involve the div.

Following @Guilhermenascimento’s suggestion, you can do so :

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

  • Wanted that blue area stretches to the right and across the width of the table and not down. I tried with width:auto, but it didn’t work.

  • I’m sorry, but I won’t be able to put my green visa on, because what I intend to do is to página toda. In a smaller window like I do to appear across the width as I move to the right. I didn’t make myself clear. I saw that it works on the page with a higher resolution and on a smaller how to do?

  • It’s for a display situation on a small device, like iPhone. The table is off the side of the screen, div is not. Stays static at initial screen width.

  • @Today is Luísalves day... I think I got a solution, with the suggestion of a friend...

  • Sorry the confusion is that I’m learning too...

Browser other questions tagged html css table

You are not signed in. Login or sign up in order to post.