Below is the table structure:
<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 am seeking a way to keep row1 fixed while allowing other rows to scroll. Any suggestions?
Exclusive offer just 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;
}
Explore more about this topic: Freeze the top row for an html table only (Fixed Table Header Scrolling)
To keep the table header in place, you can utilize styling from bootstrap. See a demonstration of this approach here.
To make the table and table rows display as blocks, you can add display: block.
If you want to freeze the first row, simply apply position: sticky with top: 0 to the first row and use position: relative on the parent element.
Feel free to test out the code snippet provided below:
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>Currently, I am working on a project that includes online payment options via PayPal and Google Wallet, with a "buy now" button. Now, my next step is to incorporate the Sage Pay "buy now" button onto the website using HTML and JavaScript. Although I have ...
After spending countless hours researching online, I've been struggling to implement header effects on scroll without using JavaScript. My goal is to achieve a simple effect where the header reduces in height, the logo changes, and a colored border is ...
After using NextJS for a considerable amount of time, I finally decided to take a closer look at the build folder and the console output when the build process is successful. To my surprise, I noticed something peculiar during one of these inspections. In ...
I have a website that uses responsive CSS, including media queries at 768px, 480px, and 320px. However, when I resize the screen below 1040px, I notice some extra space appearing on the right margin of the entire page and I'm struggling to identify th ...
It seems like every time I try to find a solution for writing files with PHP or JavaScript, I end up in a never-ending argument. Some say it's impossible, while others claim it's possible under certain conditions. Unfortunately, none of the code ...
Whenever I utilize console.log("Outputting some text") in JavaScript within Visual Studio 2012 for Windows 8 metro development, where exactly is the text being directed to? Which location should I look at to see it displayed? Despite having the "Output" pa ...
I have an Angular 8 application with a form containing a save button that triggers a call to a Spring Boot microservice using RxJs. I decided to test what would happen if the Rest API server were down. When the Rest API is running, clicking the button wor ...
I am facing a challenge with an array of objects where some properties contain commas. My goal is to split these properties into new objects and recursively copy the rest of the properties into new array elements. For example, consider this original array ...
I am working with a list that is generated using ngRepeat, which looks like this <ul class="list-group"> <li class="list-group-item" ng-repeat="data in tree | filter:key"> {{data.name}} </li> </ul> My goal is to ma ...
After creating a simple quiz question using jQuery, involving show/hide, addClass, and tracking attempts, I am now considering how to replicate the same code for multiple questions. Would it be best practice to modify all variables in both HTML and jQuery, ...
I have a container that I want to slide in and out of view on the screen when a button is clicked. The challenge is that I do not want to set a specific width for the container as it may vary in size. I attempted to achieve this with the following code, ...
When attempting to utilize virtual populate between two models that I've created, the goal is to retrieve all reviews with the tour id and display them alongside the corresponding tour. This is achieved by using query findById() to specifically show o ...
https://i.sstatic.net/LVsgQ.jpgCurrently working on constructing a biography page filled with text content, and I aim to utilize CSS GRID instead of floats. I encountered an issue in getting the text to occupy all the available white space within the layou ...
I am currently learning ReactJS and struggling with a simple logic problem (I'm not very good at JS). I have a form that includes fields for name, email, and message. @ContactUsNew = React.createClass getInitialState: -> message: @props.mess ...
Seeking guidance on resolving a specific issue. The upload component I'm working with allows for multiple file uploads, resulting in the onDrop function returning both accepted and rejected files (based on extension and size). Among the accepted file ...
Hello and thank you in advance for your help. I'm facing a basic query here - I have two variables: var x = 'abc'; var y = 'ac'; I am looking to compare the two variables and find the dissimilarity between them, which should be: ...
I'm working with a React Accordion component using Material UI. Each time I open a tab in the Accordion, I want to load different images from another div that is located outside of the Accordion. Here is the current code snippet: export default funct ...
Just starting out with NodeJS and ExpressJS. I'm looking to customize a for loop in order to iterate through data from NodeJS using an index, akin to a non-traditional for loop. Take a look at the code snippet below, extracted from NodeJS, where I re ...
I'm just starting out with back-end development so I could use some assistance with my current project. I am working on a next.js application that applies a black and white filter to an image when it is uploaded. In the index.js file, once a file is s ...
Is there a way to extract data from an object in Vue? This is the format of my data: datasets: [{ text:"Cars", value: "[1,2,3]" }, { text:"Trains", value: "[1,4,10] } ] When I receive information from route props like this: this.selectedText= this ...