Comment dinamically définir querySelector pour lire tous les éléments d'un en-tête?

Question

Je suis assez basique sur querySelector, donc je me excuse si ma question est assez basique, mais je ne suis pas en mesure de trouver la solution en ligne

Fondamentalement, je suis en train de définir la largeur d'un en-tête de table basée sur la largeur de la cellule en dessous

le code je l'ai fait jusqu'à maintenant est la suivante:

var headerElement = elem.querySelector('thead tr:first-child th:first-child'); 
var rowElement = elem.querySelector ('tbody tr:first-child td:first-child'); 

headerElement.style.width = (rowElement.scrollWidth) + 'px'; 

ce que je veux réaliser/comprendre comment faire une boucle dinamically par tous les « têtes objet » dans ce tableau et l'utilisation le même "index" pour itérer la ligne sous pour avoir quelque chose comme ceci:

while (headerElements > i){ 
var headerElement = elem.querySelector('thead tr:first-child th:i'); 
    var rowElement = elem.querySelector ('tbody tr:first-child td:i'); 

    headerElement.style.width = (rowElement.scrollWidth) + 'px'; 
} 

Answer 1

Je résolus de cette façon:

var header = elem.querySelector('thead tr:first-child'); 
var row = elem.querySelector ('tbody tr:first-child'); 
for (i=0;header.cells.length > i;i++){ 
    header.cells[i].style.width = (row.cells[i].scrollWidth) + 'px'; 
}