冻结表头的错误 - HTML / CSS

Question

我正在尝试在我的库存网站的表格输入中输入条目。我想冻结每列的标题并尝试这样做 -> 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

您可以查看 position:sticky 以保持表格布局的完整性（无显示重置）。

滚动条必须来自父容器

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

.item2 th {
  background-color: var(--green-theme);
  color: var(--purple-theme);
  padding: 15px;
}

.item2 a {
  text-decoration: underline;
}


/* main edit here start */

.details {
  overflow: auto;
  height: 440px;
}
.details table{margin-top:0;}
#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 {
  position: sticky;
  top: 4px;
  box-shadow: 0 0 0 2px #091428, 0 -2px 0  2px #46b692;
}

#text-area tbody {}

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

---

从您当前的代码中，我们可以从How to set tbody height with overflow scroll 得到启发并做

tr {
  display:table;
  width:100%;
}
thead {
  padding-right:1.2em;
}

.selector:not(*:root), thead {
padding-right: 10px;/* because you set a 10px scrollbar for chrome */
}
thead tr {
  box-shadow:0px -2px  var(--purple-theme),  1px -2px  var(--green-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;
}

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


/* update / overwrite */
* {box-sizing:border-box}

tr {
  display: table;
  width: 100%;
}

thead {
  padding-right: 1.05em;
}

.selector:not(*:root), thead {
    padding-right: 10px;
  }
thead tr {
  box-shadow: 1px -2px var(--purple-theme), 2px -2px var(--green-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>