1. 首页
  2. 问题列表
  3. freeze表头错误-HTML/CSS
提问者：小点点

freeze表头错误-HTML/CSS


我正在尝试为我的库存网站在表输入中输入条目。我想冻结每一列的标题，并尝试用这个->；仅冻结html表的顶行（固定表头滚动）

null

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>

null

（很抱歉代码长度太长）问题是“head”与“tbody”不对齐，因为在垂直方向上溢出。我以前问过这个问题，但这似乎对我不起作用。而且，将来还会增加一些列。请不要自定义大小和宽度答案


共1个答案

匿名用户

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

滚动条必须来自父容器

null

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>

相关问题