Mise à jour de la table IE11 lorsque l'ancêtre a affiché: flex

Question

J'ai une table simple qui se décline correctement dans Chrome. Mais dans IE11, la mise en page est rompue lorsqu'un élément ancêtre a display: flex.

Les zones de saisie au bas de la page doivent être à 10 px du bas des en-têtes de tableau. Donc pour ce faire, j'ai mis margin-bottom sur le texte d'en-tête lui-même pour faire de la place pour les boîtes d'entrée (filtres), puis je les positionne absolument au bas des éléments th, qui ont position:relative pour les ancrer.

Voici le lien: https://codepen.io/nfknight/pen/KXyKdw

Toute aide est appréciée! Ou je suis curieux s'il y a d'autres idées sur la façon d'accomplir un en-tête-variable avec un élément de filtre fixe. L'élément d'en-tête et les éléments de filtre doivent tous deux être frères.

Answer 1

Ce n'est pas un problème avec un ancêtre flexible. Le supprimer ne semble pas faire de différence dans IE11 ou Chrome. Il semble que ce soit une différence de rendu pour le positionnement absolu.

Vous pouvez contourner le problème en faisant en sorte que les colonnes soient flexibles.

revised codepen

.flexAncestor { 
 
    display: flex; 
 
} 
 

 
tr { 
 
    display: flex;  /* gives full height to children */ 
 
    height: 250px;  /* for demo only */ 
 
} 
 

 
.col1 { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    width: 100px; 
 
    background: pink; 
 
} 
 

 
.col2 { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    width: 100px; 
 
    background: lightblue; 
 
} 
 

 
.ui-column-title { 
 
    margin: auto;  /* flex auto margin; see below */ 
 
} 
 

 
.ui-column-filter { 
 
    align-self: center; 
 
    margin-bottom: 10px; 
 
    width: calc(100% - 15px); 
 
}

<div class="flexAncestor"> 
 
    <div class="tableContainer"> 
 
    <table class="testDataTable"> 
 
     <thead> 
 
     <tr> 
 
      <th class="col1"> 
 
      <span class="ui-column-title">id</span> 
 
      <input class="ui-column-filter" type="text" /> 
 
      </th> 
 
      <th class="col2"> 
 
      <span class="ui-column-title">Wrapping column header inside flex ancestor throws layout off in IE11 </span> 
 
      <input class="ui-column-filter" type="text" /> 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
    </table> 
 
    </div> 
 
</div>

En savoir plus sur flex marges ici auto:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

A s mention, il n'est pas, il est flexbox liée basée sur le fait que l'effet de position: relative sur des éléments de table est définie, ce qui est bien décrite ici:

• Using Position Relative/Absolute within a TD?

---

Dans ce Dans le cas où il se trouve que l'épinglage height: 100% sur le chemin de la pile guérit le problème de positionnement absolu, si vous ajoutez cette règle, cela fonctionnera également dans IE.

.tableContainer, table, thead, tr, th { height: 100% } 

Src: https://davidwalsh.name/table-cell-position-absolute

Stack snippet

.flexAncestor { 
 
    display: flex; 
 
} 
 

 
.tableContainer { 
 
    flex: 1 0 auto; /* not sure if needed. */ 
 
} 
 

 
.tableContainer, table, thead, tr, th {   /* added */ 
 
    height: 100% 
 
} 
 

 
.ui-column-title { 
 
    margin-bottom: 100px; 
 
    display: inline-block; 
 
    white-space: normal; 
 
} 
 

 
.ui-column-filter { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: 5px; 
 
    width: calc(100% - 15px); 
 
} 
 

 
.testDataTable th { 
 
    position: relative; 
 
} 
 

 
.col1 { 
 
    width: 100px; 
 
    background: pink; 
 
} 
 

 
.col2 { 
 
    width: 100px; 
 
    background: lightblue; 
 
}

<div class="flexAncestor"> 
 
    <div class="tableContainer"> 
 
    <table class="testDataTable"> 
 
     <thead> 
 
     <tr> 
 
      <th class="col1"> 
 
      <span class="ui-column-title">id</span> 
 
      <input class="ui-column-filter" type="text" /> 
 
      </th> 
 
      <th class="col2"> 
 
      <span class="ui-column-title">Wrapping column header inside flex ancestor throws layout off in IE11 </span> 
 
      <input class="ui-column-filter" type="text" /> 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
    </table> 
 
    </div> 
 
</div>