冻结错误 table header - HTML

Question

我正在尝试在 table 输入中为我的库存网站输入条目。我想冻结每列的 headers 并尝试用这个 -> Freeze the top row for an html table only (Fixed Table Header Scrolling)

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;
}

@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);
}

        <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>

您可以在 [codepen]{https://codepen.io/zaidi2293/pen/WNwmJrP} 上查看代码（忽略大部分 css，因为它们只是为了复制我所拥有的，所以我不会不要错过任何东西）

（抱歉，代码太长了）问题是“thead”没有像列透视图那样与“tbody”对齐，因为垂直方向溢出。我以前问过这个问题，但这似乎对我不起作用。此外，将来还会添加更多的列。 没有自定义尺寸宽度的答案

Answer 1

您可以将输入框宽度设置为 100%，并将像素宽度添加到 th 和 td，而不是百分比。, 输入框宽度 100% 将有助于将其设置为其父宽度并移除其默认宽度。像素可以帮助解决固定宽度和对齐问题。

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%
}

<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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".25" ></td>
    </tr>
  </tbody>
</table>

Answer 2

th {
  background-color: #fff;
}


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

<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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".25" ></td>
    </tr>
  </tbody>
</table>

Answer 3

您可以将 table-layout 重置为 fixed，将 tr 转换为表格并将宽度应用于每个单元格，然后在 [=15 上添加 1.2em 的填充或边距=] (滚动条的平均宽度).

答案灵感来自 How to set tbody height with overflow scroll 并且可能重复。

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%;
}

<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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".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=".25"></td>
    </tr>
  </tbody>
</table>

冻结错误 table header - HTML

Errors with freeze table header - HTML

html

javascript

css

html-table

display

您可以在 [codepen]{https://codepen.io/zaidi2293/pen/WNwmJrP} 上查看代码（忽略大部分 css，因为它们只是为了复制我所拥有的，所以我不会不要错过任何东西）