Faça com que o elemento no nível do bloco preencha 100% da largura do contêiner overflow-x: scroll
Eu tenho um elemento container que tem uma certa largura, comoverflow-x: auto
. Nele, tenho um elemento de cabeçalho no nível do bloco (h1) que, sendo um elemento do bloco, preenche o contêiner horizontalmente. E faz isso, desde que não haja outros elementos no contêiner que excedam, criando uma barra de rolagem horizontal. Se houver elementos transbordando, o elemento do cabeçalho preenche apenas o espaço horizontal não transbordante do contêiner, mas não aparece no espaço transbordando.
Violino demonstrando o problema:http://jsfiddle.net/rand0mbits/qUh3s/
HTML:
<div id="one">
<h1>header</h1>
<table><tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td></tr></table>
</div>
CSS:
#one {
width: 200px;
overflow: auto;
border: solid 1px;
}
#one h1 {
font-size 1.1em;
background-color: blue;
display: inline-block;
width: 100%;
margin-top: 0;
}
table td {
border: solid 1px;
padding: 20px;
}
Como faço para<h1>
preencher toda a largura do recipiente?