How to freeze html table top row with input fields?

Question

This is the table:

<table>
    <tr> 
        <th>row1</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>

    <tr> 
        <th>row2</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>
    ...
</table>

I need to freeze row1 and scroll other rows. How can I do it?

Does this answer your question? [Freeze the top row for an html table only (Fixed Table Header Scrolling)](https://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling) — Girish Sasidharan, Jun 19 '20 at 05:28
The table has input fields, those solutions do not work... @Rirish Sasidharan — Nessi, Jun 19 '20 at 05:30

score 1 · Answer 1 · answered Jun 19 '20 at 06:00

Special for you https://jsfiddle.net/oLsghrt5/.

<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
            <div><input value="Table attribute name"></div>
          </th>
          <th>

            <div><input value="Value"></div>
          </th>
          <th>
            Description
            <div><input value="Description"></div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
        </tr>
        <tr>
          <td>bgcolor</td>
          <td>rgb(x,x,x), #xxxxxx, colorname</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
        </tr>
        <tr>
          <td>border</td>
          <td>1,""</td>
          <td>Specifies whether the table cells should have borders or not</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between cells</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
          <td>Not supported in HTML5. Specifies the width of a table</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Css

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}

Sample from duplicate: Freeze the top row for an html table only (Fixed Table Header Scrolling)

)) I realized that later, Thanks a lot – Nessi Jun 19 '20 at 06:09 — Nessi, Jun 19 '20 at 06:09

score 1 · Answer 2 · edited Jun 19 '20 at 11:28

1

You can fix the table head using bootstrap styling. An example of this is provided here.

edited Jun 19 '20 at 11:28

Run_Script

2,487
2
15
30

answered Jun 19 '20 at 06:07

Code Hiti

11
2

2

Instead of just linking to a fiddle, which may one day be deleted, please share the relevant code in your answer. – Unbranded Manchester Jun 19 '20 at 06:19
yes, people hate posting links here) just be careful not to get downvotes) – Nessi Jun 19 '20 at 17:26

harish kumar · Accepted Answer · 2020-06-19T06:09:30.417

0

You can add display: block to table and table rows.

And to freeze the first row, just mark position: sticky with top:0 to the first row and position: relative to the parent element.

Try running code snippet

table {
  margin-top: 50px;
  height: 50px;
  overflow: auto;
  display: block;
}

tbody {
 position: relative
}

tbody tr {
 display: block
}

tbody tr:first-child{
 position: sticky;
 top: 0;
 background: white;
}

<table>
    <tr> 
        <th>row1</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>

    <tr> 
        <th>row2</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>
    <tr> 
        <th>row2</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>
    <tr> 
        <th>row2</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>
    <tr> 
        <th>row2</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>

</table>

edited Jun 19 '20 at 06:09

answered Jun 19 '20 at 06:00

harish kumar

1,732
1
10
21

cool, how to avoid overlap of left columns when scrolling? – Nessi Jun 19 '20 at 06:06
1

You can add background color with padding. Adding example of it – harish kumar Jun 19 '20 at 06:07
Check out the updated code. I just added `background: white` to the first row. You can add CSS as per your design & needs for a better look. – harish kumar Jun 19 '20 at 06:10
1

@Nessi this is a completely wrong solution, you never change the display of table elements. You break the table layout, example; https://jsfiddle.net/saL45f0v/ – Temani Afif Jun 19 '20 at 09:51
@TemaniAfif checkout https://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling/29812382 for better understanding for above statement. – harish kumar Jun 19 '20 at 10:12
actually none of the solutions worked for me, but this one is the best among all and the one Pavel posted. – Nessi Jun 19 '20 at 17:28
Thanks @Nessi. You can play with `styles` to have table as per your needs. – harish kumar Jun 21 '20 at 17:38

How to freeze html table top row with input fields?

3 Answers3