1
votes

Erreurs avec l'en-tête de tableau figé - HTML

J'essaie de saisir des entrées dans les entrées de table pour mon site Web d'inventaire. Je veux figer les en-têtes de chaque colonne et essayer de le faire avec ceci -> Figer la ligne du haut pour une table html uniquement (Défilement d'en-tête de table fixe)

        <div class="grid_container">
          <div class="grid item2">
            <div class="inside" id="topTableID">
              <form action="php/invoiceFetch.php" method="post" enctype="multipart/form-data" id='myForm' onkeypress="return event.keyCode != 13;">
                <table>
                  <tr>
                    <td><label for="">Location :</label></td>
                    <td><input type="text" autocomplete="off" name="invoice_name" id="invoice_name" onchange="invoiceSpliter()" onkeyup="customerSearch(this.value)" style="width: 500;"></td>
                    <td><label>Product Suggestion : </label></td>
                    <td>
                      <div id="product_suggestion" class="suggestion"></div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div id="suggestion" class="suggestion"></div>
                    </td>
                    <td></td>
                    <td></td>
                  </tr>
                </table>
            </div>

            <div class="details">
              <table id="text-area">
                <thead>
                  <tr>
                    <th><label>Product Name</label></th>
                    <th><label>Current Locations</label></th>
                  </tr>
                </thead>
                <tbody id="addInside_tr_20">
                    <!--there will be some rows added here -->
                </tbody>
              </table>
              <table>
                <tr>
                  <td><input type="reset" value="Reset" tabindex="-1"></td>
                  <td><input type="button" onclick="document.getElementById('myModal').style.display = 'block';" value="Submit"></td>
                </tr>
              </table>
              </form>
            </div>
          </div>
        </div>

@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400|Oswald:200,300,400&display=swap");
:root {
  --purple-theme: #091428;
  --lightpurple-theme: #0f3a41;
  --gray-bg-heading: #b8b8b8;
  --gray-bg-sidebar: #dee3e7;
  --lightgreen-theme: #65ffce;
  --green-theme: #46b692;
  --red-theme: #f75b54;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 0px 0px 10px 10px;
  background: var(--lightpurple-theme);
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--green-theme);
  border-radius: 0 0 10px 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--lightgreen-theme);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
::-moz-selection {
  /* Code for Firefox */
  color: var(--purple-theme);
  background: var(--green-theme);
}
::selection {
  color: var(--purple-theme);
  background: var(--green-theme);
}
input:focus,
option:focus,
select:focus {
  outline-color: var(--lightgreen-theme);
}
body {
  height: 100%;
  background-repeat: no-repeat;
}
a {
  text-decoration: none;
}
table,
select,
input,
a {
  color: whitesmoke;
}
input {
  width: 100%;
  line-height: 5px;
  font-size: 10px;
}
input[type="text"],
input[type="url"],
input[type="number"] {
  height: 30px;
  border: 1px solid var(--green-theme);
  background-color: transparent;
  color: whitesmoke;
  font-size: 15px;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid var(--green-theme);
  background-color: var(--green-theme);
  color: var(--purple-theme);
  text-decoration-style: bold;
  font-size: 15px;
  border-radius: 0px 15px 15px 0px;
}

/* ------grid container------ */
input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
}
input[type="date"] {
  height: 100%;
}
.grid_container {
  display: grid;
  grid-template-columns: repeat(auto, 1fr);
  grid-gap: 10px;
  padding: 10px;
  margin: 0 auto;
  color: whitesmoke;
}
.grid {
  background-color: var(--purple-theme);
  border: 1px solid lightgrey;
  padding: 20px;
}
.inside > span {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 18px;
}
.item1 {
  grid-column: 1 / 3;
}
.item2 {
  grid-column: 3 / 5;
}

.item3 {
  grid-column: 5 / 7;
}
.item4 {
  grid-column: 7 / 9;
}

.item5 {
  grid-column: 1 / 9;
}

.inside {
  padding: 0;
  padding-bottom: 10px;
  border: none;
}

.item2 {
  grid-column: 1 / 9;
  grid-row: 1 / 5;
}
.inside input[type="text"] {
  width: 200px;
}
.item2 select,
.item2 option {
  width: 100%;
  height: 30px;
  background-color: var(--purple-theme);
  border: 1px solid var(--green-theme);
  text-align: center;
}
.item2 select option {
  background: var(--purple-theme);
}
.item2 table {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  font-size: 20px;
}
.details table:nth-child(1) {
  margin-top: -20px;
}
.details {
  margin-top: -20px;
}
.item2 th {
  background-color: var(--green-theme);
  color: var(--purple-theme);
  padding: 15px;
}
.item2 a {
  text-decoration: underline;
}

/* main edit here start */
                      #text-area td:nth-child(1) {
                        width: 80%;
                      }
                      #text-area td:nth-child(2) {
                        width: 20%;
                      }
                      #text-area thead th:nth-child(1) {
                        width: 80%;
                      }
                      #text-area thead th:nth-child(2) {
                        width: 20%;
                      }

                      #text-area thead {
                        display: block;
                      }
                      #text-area tbody {
                        height: 440px;
                        display: block;
                        overflow: auto;
                        width: 100%;
                      }
                      #text-area input {
                        width: 100%;
                      }

                      #text-area input {
                        border: none;
                      }
                      #text-area {
                        border: 1px solid var(--green-theme);
                      }
                      #text-area tr:nth-child(2n + 1) {
                        background: var(--lightpurple-theme);
                      }
                      #text-area td:nth-child(4) {
                        border-right: none;
                      }
                      #text-area td {
                        border-right: 1px solid var(--green-theme);
                      }
/* main edit here ends */
.item2 .inside table * {
  padding-bottom: 20px;
}

.suggestion {
  position: absolute;
  background-color: var(--purple-theme);
  font-size: smaller;
  cursor: pointer;
}
.suggestion_i:hover {
  color: var(--purple-theme);
  background-color: var(--green-theme);
}
.suggestion_i {
  cursor: pointer;
  text-align: center;
  text-justify: center;
  padding: 10px 10px -5px 10px;
}
#sorted_div {
  background-color: var(--purple-theme);
  /*position:absolute;*/
  top: 123px;
}
#sorted_div tr:nth-child(2n + 1) {
  background: var(--lightpurple-theme);
}

window.onload = function(){
  var to_show = '';
  for(var i = 1 ; i < 50 ; i++){
    to_show += '<tr><td><input type="text" autocomplete="off" id="product_name_'+ i +'" name="product_name_'+i+'" onkeyup="productSearch(this.value, '+i+')" tabindex="-1" style="font-size:larger;"></td>';
    to_show += '<td><input type="text" autocomplete="off" id="location_'+ i +'" name="location_'+ i +'" onkeyup="productSearch(this.value, '+ i +')" tabindex="-1" style="font-size:larger;"></td></tr>';
  }
  document.getElementById('addInside_tr_20').innerHTML = to_show;
}

Vous pouvez vérifier le code sur [codepen] {https://codepen.io/zaidi2293/pen/WNwmJrP} (Ignorez la plupart des css car ils sont juste pour reproduire ce que j'avais donc que je ne manque pas quelque chose)

(Désolé pour la longueur du code) Le problème est que le "thead" n'est pas aligné avec "tbody" comme dans la perspective de la colonne à cause d'un débordement en vertical direction. J'ai déjà posé cette question mais cela ne semble pas fonctionner pour moi. De plus, d'autres colonnes seront ajoutées à l'avenir. Aucune réponse de largeur de taille personnalisée, veuillez

javascript html css html-table display

0 commentaires

3 Réponses :

0
votes

Vous pouvez définir la largeur de la zone de saisie à 100% et ajouter une largeur de pixels à th et td, au lieu de pourcentages., La largeur de la zone de saisie 100% aidera à la définir sur sa largeur parente et à supprimer sa largeur par défaut. Les pixels peuvent aider à avoir une largeur fixe et des problèmes d'alignement.

<table id="text-area">
  <thead>
    <tr>
      <th><label >Barcode</label></th>
      <th><label >Product Name</label></th>
      <th><label >Count</label></th>
      <th><label >QB-Price / Online Price</label></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" value="772696001844"></td>
      <td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696023815"></td>
      <td><input type="text" value="BILBERRY FRUIT POWDER" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696031100"></td>
      <td><input type="text" value="BLADDERWRACK C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696031100"></td>
      <td><input type="text" value="BLADDERWRACK C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696031100"></td>
      <td><input type="text" value="BLADDERWRACK C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696037607"></td>
      <td><input type="text" value="BUCKTHORN BARK C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696044803"></td>
      <td><input type="text" value="CASCARA BARK C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696044803"></td>
      <td><input type="text" value="CASCARA BARK C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696042007"></td>
      <td><input type="text" value="CHAMOMILE FLOWER WHOLE" ></td>
      <td><input type="text" value="6" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696066805"></td>
      <td><input type="text" value="DAMIANA LVS. C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696066805"></td>
      <td><input type="text" value="DAMIANA LVS. C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696067208"></td>
      <td><input type="text" value="DANDELION LVS. C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696067208"></td>
      <td><input type="text" value="DANDELION LVS. C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696084007"></td>
      <td><input type="text" value="FRANKINCENSE TEARS" ></td>
      <td><input type="text" value="4" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696087008"></td>
      <td><input type="text" value="GENTIAN ROOT C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696087008"></td>
      <td><input type="text" value="GENTIAN ROOT C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696108208"></td>
      <td><input type="text" value="HIBISCUS FLOWER WHOLE" ></td>
      <td><input type="text" value="6" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696112809"></td>
      <td><input type="text" value="HYSSOP HERB POWDER" ></td>
      <td><input type="text" value="2" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696124604"></td>
      <td><input type="text" value="LICORICE ROOT C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696124604"></td>
      <td><input type="text" value="LICORICE ROOT C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
  </tbody>
</table>

table{
  border: 1px solid;
}
#text-area{
  border: 1px solid;
}

#text-area td:nth-child(1){
  width: 100px;
}
#text-area td:nth-child(2){
  width: 200px;
}
#text-area td:nth-child(3){
  width: 100px;
}
#text-area td:nth-child(4){
  width: 100px;
}

#text-area thead th:nth-child(1){
  width: 100px;
}
#text-area thead th:nth-child(2){
  width: 200px;
}
#text-area thead th:nth-child(3){
  width: 100px;
}
#text-area thead th:nth-child(4){
  width: 100px;
}
   

#text-area thead{
  display:block;
}
#text-area  tbody{
  height:200px;
  display:block;
  overflow:auto;
}
  #text-area input{
width:100%
}

1 commentaires

Merci pour les suggestions mais je pense que cela ne fonctionne pas pour moi @vishnu

0
votes

<table id="text-area">
  <thead>
    <tr>
      <th><label >Barcode</label></th>
      <th><label >Product Name</label></th>
      <th><label >Count</label></th>
      <th><label >QB-Price / Online Price</label></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" value="772696001844"></td>
      <td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696023815"></td>
      <td><input type="text" value="BILBERRY FRUIT POWDER" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696031100"></td>
      <td><input type="text" value="BLADDERWRACK C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696031100"></td>
      <td><input type="text" value="BLADDERWRACK C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696031100"></td>
      <td><input type="text" value="BLADDERWRACK C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696037607"></td>
      <td><input type="text" value="BUCKTHORN BARK C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696044803"></td>
      <td><input type="text" value="CASCARA BARK C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696044803"></td>
      <td><input type="text" value="CASCARA BARK C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696042007"></td>
      <td><input type="text" value="CHAMOMILE FLOWER WHOLE" ></td>
      <td><input type="text" value="6" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696066805"></td>
      <td><input type="text" value="DAMIANA LVS. C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696066805"></td>
      <td><input type="text" value="DAMIANA LVS. C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696067208"></td>
      <td><input type="text" value="DANDELION LVS. C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696067208"></td>
      <td><input type="text" value="DANDELION LVS. C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696084007"></td>
      <td><input type="text" value="FRANKINCENSE TEARS" ></td>
      <td><input type="text" value="4" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696087008"></td>
      <td><input type="text" value="GENTIAN ROOT C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696087008"></td>
      <td><input type="text" value="GENTIAN ROOT C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696108208"></td>
      <td><input type="text" value="HIBISCUS FLOWER WHOLE" ></td>
      <td><input type="text" value="6" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696112809"></td>
      <td><input type="text" value="HYSSOP HERB POWDER" ></td>
      <td><input type="text" value="2" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696124604"></td>
      <td><input type="text" value="LICORICE ROOT C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
    <tr>
      <td><input type="text" value="772696124604"></td>
      <td><input type="text" value="LICORICE ROOT C/S" ></td>
      <td><input type="text" value="1" ></td>
      <td><input type="text" value="$19.25" ></td>
    </tr>
  </tbody>
</table>

th {
  background-color: #fff;
}


th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

2 commentaires

position: sticky est le chemin de nos jours, il nécessite un wrapper avec une hauteur définie. Je voterais pour si l'extrait de code imitait entièrement le résultat attendu, également avec une petite explication. L'extrait en mode pleine page ne défile pas du tout;)

Le même problème ne s'aligne pas correctement avec le reste de la conception. Mais merci pour la suggestion, j'ai appris quelque chose de nouveau de ce @Gaurav

0
votes

Vous pouvez réinitialiser le table-layout sur fixed , transformer tr en tableaux et appliquer la largeur à chaque cellule, puis ajouter un 1.2 em padding ou marge droite sur thead (largeur moyenne d'une barre de défilement) .

réponse inspirée de Comment régler la hauteur du corps avec le défilement de débordement et ~~probablement~~ un doublon. P >

<table id="text-area">
  <thead>
    <tr>
      <th><label>Barcode</label></th>
      <th><label>Product Name</label></th>
      <th><label>Count</label></th>
      <th><label>QB-Price / Online Price</label></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" value="772696001844"></td>
      <td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696023815"></td>
      <td><input type="text" value="BILBERRY FRUIT POWDER"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696031100"></td>
      <td><input type="text" value="BLADDERWRACK C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696031100"></td>
      <td><input type="text" value="BLADDERWRACK C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696031100"></td>
      <td><input type="text" value="BLADDERWRACK C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696037607"></td>
      <td><input type="text" value="BUCKTHORN BARK C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696044803"></td>
      <td><input type="text" value="CASCARA BARK C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696044803"></td>
      <td><input type="text" value="CASCARA BARK C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696042007"></td>
      <td><input type="text" value="CHAMOMILE FLOWER WHOLE"></td>
      <td><input type="text" value="6"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696066805"></td>
      <td><input type="text" value="DAMIANA LVS. C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696066805"></td>
      <td><input type="text" value="DAMIANA LVS. C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696067208"></td>
      <td><input type="text" value="DANDELION LVS. C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696067208"></td>
      <td><input type="text" value="DANDELION LVS. C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696084007"></td>
      <td><input type="text" value="FRANKINCENSE TEARS"></td>
      <td><input type="text" value="4"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696087008"></td>
      <td><input type="text" value="GENTIAN ROOT C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696087008"></td>
      <td><input type="text" value="GENTIAN ROOT C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696108208"></td>
      <td><input type="text" value="HIBISCUS FLOWER WHOLE"></td>
      <td><input type="text" value="6"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696112809"></td>
      <td><input type="text" value="HYSSOP HERB POWDER"></td>
      <td><input type="text" value="2"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696124604"></td>
      <td><input type="text" value="LICORICE ROOT C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
    <tr>
      <td><input type="text" value="772696124604"></td>
      <td><input type="text" value="LICORICE ROOT C/S"></td>
      <td><input type="text" value="1"></td>
      <td><input type="text" value="$19.25"></td>
    </tr>
  </tbody>
</table>

table {
  border: 1px solid;
}

tr {
  display: table;
  table-layout: fixed;
}

#text-area {
  border: 1px solid;
}

#text-area tr :nth-child(1) {
  width: 15%;
}

#text-area tr :nth-child(2) {
  width: 60%;
}

#text-area tr :nth-child(3) {
  width: 10%;
}

#text-area tr :nth-child(4) {
  width: 15%;
}

#text-area thead {
  display: block;
  padding-right:1.2em;
}

#text-area tbody {
  height: 200px;
  display: block;
  overflow: auto;
}

input {
  box-sizing:border-box;
  min-width: 100%;
}

4 commentaires

Merci pour cette information. Bien que cela ait résolu le problème posé, cela a à nouveau ruiné l'alignement. Pour une raison quelconque, ma tête et mon corps ne veulent pas travailler ensemble. J'ai suivi votre suggestion de la question connexe à laquelle vous avez répondu, mais même problème. @ G-Cyrillus

@SaadSaiyed avez-vous un exemple de problème? quel (s) navigateur (s) utilisez-vous? positionnerait: collant serait-il bien pour vous d'utiliser? exemple possible: codepen.io/gc-nomade/pen/gOPpxjP

J'utilise Chrome par défaut et en position: sticky ne fonctionne pas pour moi. Je n'ai pas vu l'en-tête du tableau coller dans votre exemple ici: https: // codepen. io / gc-nomade / pen / gOPpxjP . Je dois également faire attention à la largeur de mon div dans lequel cette table existe pour un design réactif. Je peux vous fournir le lien de mon site Web en ligne si cela peut vous donner une meilleure idée de mon besoin. Mais sincèrement merci pour votre aide.

oh oui, il faut que ce soit les plus collants: mettez à jour à codepen.io/gc-nomade/pen / gOPpxjP