const max800 = window.matchMedia("(max-width: 800px)"); 
const max450 = window.matchMedia("(max-width: 450px)");

const theadContent = i => { 
   const header = table.querySelectorAll(".header .td");
   let content;
   header.forEach((item, j) => { 
      if (i === j) {
         content = item.textContent;
      }
   }, i);
   return content;
};

const createThead = (cell, i) => {
   const elem = document.createElement("div");
   elem.classList.add("thead");
   elem.innerHTML = theadContent(i);
   cell.appendChild(elem);            
}

const mediumScreen = rule => {
   if (rule.matches) { 
      console.log('medium');
      const rows = [...table.querySelectorAll(".tr")];
      rows.shift();
      rows.forEach(row => {;
         const cells = row.querySelectorAll(".td");
         cells.forEach((cell, i) => {
            createThead(cell, i);
         });
      });
   } else { 
      console.log('not medium');
      const theads = table.querySelectorAll(".thead");
      theads.forEach(element => {
         element.parentNode.removeChild(element);
      });
   }
};

const smallScreen = (rule) => {
   if (rule.matches) {
      console.log('small');
      const rows = [...table.querySelectorAll(".tr")];
      rows.shift();
      rows.forEach(row => {;
         const cells = row.querySelectorAll(".td");
         cells.forEach((cell, i) => {
            let thead = cell.querySelector('.thead');
            thead.classList.add("td");
            row.insertBefore(thead, cell);
         });
      });
   } else {
      console.log('not small'); // large is not small, donc il passe ici !! pas normal
      const rows = [...table.querySelectorAll(".tr")];
      rows.shift();
      rows.forEach(row => {;
         const theads = row.querySelectorAll(".thead");
         theads.forEach((thead) => {
            thead.classList.remove("td");
            thead.parentNode.removeChild(thead); 
         });
         const cells = row.querySelectorAll(".td");
         cells.forEach((cell, i) => {
            createThead(cell, i);
         });
      });
   }
};

mediumScreen(max800);
max800.addListener(mediumScreen);

smallScreen(max450);
max450.addListener(smallScreen);