Top section of a table repaired

Question

Top section of a table repaired

It seems that the position fixed attribute is not working as expected in this scenario. I might be missing something.

I'm trying to keep the input boxes in the first row frozen when scrolling, but none of the solutions I've found seem to be effective.

Check out this link for more information

.table{
text-align:center;
overflow: auto;
    table{
        width: 95%;
        margin: auto;
        margin-top: 5px;
         }
    }
.table_scroll
 {
display:block;
height:500px;
overflow-y:scroll;
 }

<div class="table">
<table class="table_scroll">
<tbody>
<tr class="main_tr">
 <th class="input_col"><input title="empno" placeholder="empno" type="text" class="col_data" id="empno" autocomplete="off"></th>
 <th class="input_col"><input title="name" placeholder="name" type="text" class="col_data" id="name" autocomplete="off"></th>
 <th class="input_col"><input title="job" placeholder="job" type="text" class="col_data" id="job" autocomplete="off"></th>
 <th class="input_col"><input title="boss" placeholder="boss" type="text" class="col_data" id="boss" autocomplete="off"></th>
 <th class="input_col"><input title="hiredate" placeholder="hiredate" type="text" class="col_data" id="hiredate" autocomplete="off"></th>
 <th class="input_col"><input title="salary" placeholder="salary" type="text" class="col_data" id="salary" autocomplete="off"></th>
 <th class="input_col"><input title="comm" placeholder="comm" type="text" class="col_data" id="comm" autocomplete="off"></th>
 <th class="input_col"><input title="deptno" placeholder="deptno" type="text" class="col_data" id="deptno" autocomplete="off"></th>
</tr>

<tr id="row1" class="remove table_row">
  <td>7369</td>
  <td>SMITH</td>
  <td>CLERK</td>
  <td>7902</td>
  <td>1980-12-17</td>
  <td>800.00</td>
  <td></td>
  <td>20</td>
</tr>
<tr id="row2" class="remove table_row">
  <td>7370</td>
  <td>ALLEN</td>
  <td>CLERK</td>
  <td>7902</td>
  <td>1980-12-17</td>
  <td>800.00</td>
  <td></td>
  <td>20</td>
</tr>
</tbody>
</table>
</div>

jquery html css html-table sass

Answer 1

Answer №1

Note: This solution is specifically for vertical scrolling and assumes that the table will fit horizontally. If horizontal scrolling is needed, additional jQuery code will be required to listen to scroll events and update styles accordingly.

Problem 1: Changing Column Widths

Solution 1: Use CSS to set table-layout: fixed and predefine the widths of each column.

Solution 2: Use jQuery to measure the columns dynamically, apply table-layout: fixed, and set the width of each column.

var $table = $('table');
var $tbody = $table.find('tbody');
var $ths = $table.find('th');
var $tds =  $table.find('tbody tr:first-child td'); //only need the first row
var widths = [];


//Measure the widths
$ths.each(function(i, cell) {
    var $cell = $(cell);
    widths.push(
        cell.clientWidth //don't use jquery's width() it's inaccurate in cases with bordercollapse.
        - parseFloat($cell.css('padding-right'))
        - parseFloat($cell.css('padding-left'))
    );
});

//Freeze the cells widths
$ths.each(function(i, cell) {
    $(cell).width(widths[i]);
});
$tds.each(function(i, cell) {
    $(cell).width(widths[i]);
});

Problem 2: Implementing Scrolling

Solution 1: Set the table, tbody, and thead to display: block. Position thead absolutely and set tbody to scroll.

table.freeze  {
    position: relative;
    display: block;
    table-layout: fixed;
}

table.freeze thead {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    background-color: #fff;
}
table.freeze tbody {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}

Solution 2: Clone the thead into a separate table, position it absolutely within another wrapper. This approach may simplify other functionalities like making the header also stay visible during page scrolls or adding horizontal scrolling.

See It in Action Check out this working example. Make sure the result pane is wide enough to view the entire table.

http://jsfiddle.net/shindigg/232Vv/1/

Answer 2

Note: This solution is specifically for vertical scrolling and assumes that the table will fit horizontally. If horizontal scrolling is needed, additional jQuery code will be required to listen to scroll events and update styles accordingly.

Problem 1: Changing Column Widths

Solution 1: Use CSS to set table-layout: fixed and predefine the widths of each column.

Solution 2: Use jQuery to measure the columns dynamically, apply table-layout: fixed, and set the width of each column.

var $table = $('table');
var $tbody = $table.find('tbody');
var $ths = $table.find('th');
var $tds =  $table.find('tbody tr:first-child td'); //only need the first row
var widths = [];


//Measure the widths
$ths.each(function(i, cell) {
    var $cell = $(cell);
    widths.push(
        cell.clientWidth //don't use jquery's width() it's inaccurate in cases with bordercollapse.
        - parseFloat($cell.css('padding-right'))
        - parseFloat($cell.css('padding-left'))
    );
});

//Freeze the cells widths
$ths.each(function(i, cell) {
    $(cell).width(widths[i]);
});
$tds.each(function(i, cell) {
    $(cell).width(widths[i]);
});

Problem 2: Implementing Scrolling

Solution 1: Set the table, tbody, and thead to display: block. Position thead absolutely and set tbody to scroll.

table.freeze  {
    position: relative;
    display: block;
    table-layout: fixed;
}

table.freeze thead {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    background-color: #fff;
}
table.freeze tbody {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}

Solution 2: Clone the thead into a separate table, position it absolutely within another wrapper. This approach may simplify other functionalities like making the header also stay visible during page scrolls or adding horizontal scrolling.

See It in Action Check out this working example. Make sure the result pane is wide enough to view the entire table.

http://jsfiddle.net/shindigg/232Vv/1/

Answer 3

Answer №2

Take a look at this code snippet that needs modification:

tr.table_row td {
    display:table-cell;   
}

Answer 4

Take a look at this code snippet that needs modification:

tr.table_row td {
    display:table-cell;   
}

Answer 5

Answer №3

Consider updating your CSS:

.table_scroll
 {
display:block;
height:500px;
overflow-y:auto;
 }

See it in action here: http://jsfiddle.net/r8WDb/6/

Answer 6

Consider updating your CSS:

.table_scroll
 {
display:block;
height:500px;
overflow-y:auto;
 }

See it in action here: http://jsfiddle.net/r8WDb/6/

Top section of a table repaired

Answer №1

Answer №2

Answer №3

Similar questions

An AJAX request was dispatched to the identical PHP script

Turbolinks refusing to disregard page in Ruby on Rails application

Is there a way to include multiple div elements on a single page using React?

Unable to fix the unhandled reference error

Smoothly scroll through parallax backgrounds

How to access a specific element within an ng-grid

Turning a string array into a basic array can be achieved through a few simple steps

Discovering the method to retrieve the information of the selected item in AngularJS

Troubles encountered with webserver authentication while attempting to view webserver material using UWP WebView

There seems to be a problem with the external JavaScript file not functioning

Issue with Displaying Full-Page Div

How can we alert users when data has been updated without the need for a page

Checking for the winner in a JavaScript tic-tac-toe game

Leverage the power of EJS and Node JS by incorporating node modules into

Steps to ensure your Bootstrap side menu spans the entire height of the page

Is the Paypal button causing issues with the navigation bar?

What are the best tools to develop a browser-based 2D top-down soccer simulation?

There is no need for updates as git is already current for some mysterious reason

Can the navbar brand be centered in Bootstrap 4 while also aligning some text to the left of the brand?

Issues arise when attempting to animate letters using jQuery and CSS