Por que o layout da tabela: fixo afeta a largura do elemento pai?
Alguém pode explicar por que meudiv
comtable-layout:fixed
está alterando a largura do seu elemento pai (body
neste caso) para torná-lo 100% quando não deve ser 100%, pois está posicionado?
body {
border: 2px solid red;
height: 100vh;
margin:0;
padding: 0;
position: absolute;
}
.c{
display: table;
width: 80%; /* Any percentage value different from 0 */
table-layout:fixed;
outline: 2px solid blue;
}
<div class="c">d</div>
Como você pode ver acima, adicionartable-layout:fixed
força o corpo a ter largura total E a porcentagemwidth
nodiv
funcionará relativamente aowidth
dobody
!
Este não é o caso do snippet abaixo, em que o comportamento é de alguma forma lógico e intuitivo:
body {
border: 2px solid red;
height: 100vh;
margin:0;
padding: 0;
position: absolute;
}
.c{
display: table;
width: 80%;
/* table-layout:fixed; */
outline: 2px solid blue;
}
<div class="c">d</div>
Comotable-layout:fixed
afeta o elemento pai, que está posicionado neste caso?
Como observação lateral, o uso de valores de pixel comwidth
produz um resultado lógico:
body {
border: 2px solid red;
height: 100vh;
margin:0;
padding: 0;
position: absolute;
}
.c{
display: table;
width: 200px;
table-layout:fixed;
outline: 2px solid blue;
}
<div class="c">d</div>
Também podemos ter um pouco de excesso com issoestranho comportamento:
body {
margin:0;
position:relative;
width:300px;
border-top:20px solid green;
}
.container {
border: 2px solid red;
height: 100vh;
position: absolute;
}
.c {
display: table;
width: 120%;
table-layout: fixed;
outline: 2px solid blue;
animation:change 2s linear infinite alternate;
}
@keyframes change {
from{width:1%;}
to {width:150%}
}
<div class="container">
<div class="c">d</div>
</div>