Emphasize the center row within a moving table

I am interested in developing a scrolling table where only 10 rows are visible at any given time, with the middle row set to stand out even during scrolling.

The concept is that as the user scrolls down, the highlighted row changes progressively as they continue to scroll.

View my JsFiddle here

I have created a simple table where the middle row is highlighted. However, I would like the highlighted class to shift to the next row when scrolling starts, creating the effect of always highlighting the middle row.

table {
max-width: 980px;
table-layout: fixed;
margin: auto;
}

th, td {
padding: 5px 10px;
border: 1px solid #000;
}

thead, tfoot {
background: #f9f9f9;
display: table;
width: 100%;
width: calc(100% - 18px);
}

tbody {
height: 300px;
overflow: auto;
overflow-x: hidden;
display: block;
width: 100%;
}

tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}

.highlighted{
 background-color: coral;
}
<body>
<table>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
      <th scope="col">Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
    </tr>
    // Remaining rows omitted for brevity
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
      <td>Footer 4</td>
    </tr>
  </tfoot>
</table>
</body>

javascripthtmlcss

Answer №1

Give it a shot using the nth-child selector

tbody tr:nth-child(5n) td{
 background-color: coral;
}


table {
max-width: 980px;
table-layout: fixed;
margin: auto;
}

th, td {
padding: 5px 10px;
border: 1px solid #000;
}

thead, tfoot {
background: #f9f9f9;
display: table;
width: 100%;
width: calc(100% - 18px);
}

tbody {
height: 300px;
overflow: auto;
overflow-x: hidden;
display: block;
width: 100%;
}

tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}

tbody tr:nth-child(5n) td{
 background-color: coral;
}
<body>
<table>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
      <th scope="col">Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
      <td>Footer 4</td>
    </tr>
  </tfoot>
</table>
</body>

Answer №2

You may want to set a background for the table element that will stay fixed:

table {
  max-width: 980px;
  table-layout: fixed;
  margin: auto;
}

th,
td {
  padding: 5px 10px;
  border: 1px solid #000;
}

thead,
tfoot {
  background: #f9f9f9;
  display: table;
  width: 100%;
  width: calc(100% - 18px);
}

tbody {
  height: 300px;
  overflow: auto;
  overflow-x: hidden;
  display: block;
  width: 100%;
  background:
    linear-gradient(coral,coral) 
    3px calc(50% + 3px) /*left top*/
    /
    calc(100% - 22px) 30px  /* Width height*/
    no-repeat;
}

tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/*.highlighted {
  background-color: coral;
}*/
<body>
  <table>
    <thead>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3</th>
        <th scope="col">Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      (replicate remaining cells for brevity)
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
        <td>Footer 4</td>
      </tr>
    </tfoot>
  </table>
</body>

Answer №3

If you want to implement color change while scrolling, consider using JavaScript as well:

$(function() {
  $("tbody").scroll(function(e) {
    var fifth = null;
    $("tbody tr").each(function() {
      if (isScrolledIntoView($(this)) && !fifth) {
        fifth = $(this).nextAll().eq(4);
        $(this).siblings().children("td").removeClass("highlighted");
        fifth.children("td").addClass("highlighted");
      }
    });
  });

  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
  }
});
table {
  max-width: 980px;
  table-layout: fixed;
  margin: auto;
}

th,
td {
  padding: 5px 10px;
  border: 1px solid #000;
}

thead,
tfoot {
  background: #f9f9f9;
  display: table;
  width: 100%;
  width: calc(100% - 18px);
}

tbody {
  height: 300px;
  overflow: auto;
  overflow-x: hidden;
  display: block;
  width: 100%;
}

tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.highlighted {
  background-color: coral;
}
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

<body style="-ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;">
  <table>
    <thead>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3</th>
        <th scope="col">Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
       // More table rows... //
      <tr>
        <td class="highlighted">Cell content</td>
        <td class="highlighted">Cell content</td>
        <td class="highlighted">Cell content</td>
        <td class="highlighted">Cell content</td>
      </tr>
     // More table rows... //
      
    </tbody>
  
  </table>
</body>

Answer №4

To start, we must establish the height of our table and cells (assuming uniform cell heights), as well as the size of each cell within the view for later use in identifying cells in the middle of the view.

    var $table = $("#table");
    var $scrollableBody = $("#tbody");
    var $scrollableBodyRow = $("#tbody > tr");
    var scrollableHeight = $scrollableBody.height();
    var cellHeight = $scrollableBody.find('tr').height();
    var cellsInView = Math.round(scrollableHeight / cellHeight);

Now that we know how many rows are visible in the viewport - cellsInView.

We need to create a function that will determine the top row during scrolling. The top cell is calculated by dividing the scroll top position by the cell height. Once this is determined, we simply add half of the items per view from the starting cell.

 var findMiddle = function () {
      var offsetTop = $scrollableBody.scrollTop(),
        index;

      if (offsetTop === 0) {
        // find the middle one
        index = Math.round(cellsInView / 2) - 1;
      } else {
        var topCell = Math.round(offsetTop / cellHeight);
        $('.highlighted').removeClass('highlighted');
        index = Math.round((topCell + cellsInView / 2)) - 1
      }

      $("#row-" + index).addClass("highlighted");
    }

This helper function toggles the class for highlighting purposes.

    $scrollableBodyRow.each(function (index) {
      $(this).attr('id', "row-" + index);
    });

We apply highlighting on load.

    findMiddle();

Demo link: https://jsfiddle.net/sabo9n8L/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that all links are opened in a new tab

When including _blank in the a href URL, my website contains various elements like iframes and ads from Adsense, Taboola,, etc. Currently, when a user clicks on an iframe or ad, it opens in the same window. Is there a way to ensure that all URLs (includin ...

javascripthtmljqueryajax

Is it best practice to initialize loaded scripts before the JQuery .load callback is called or should it be done after the .ready callback in the loaded script?

When I click a button in my main document, I load the content of a specific div using jQuery: $("#my_div").load(function() { alert("Content Loaded"); }); The loaded content contains a script: <script> alert("Initial Alert from External Script" ...

javascriptjquery

The z-index is not functioning properly in terms of layering correctly

Seeking advice on z-index... I'm experimenting with the code and trying to get my id="hidebar" to appear above the "content" and "content-inner" divs. Apologies if this is elementary, but I'm having some trouble =D CSS structure file: body { ...

cssz-indexlayer

Generate various routes and subroutes from an array

I need to create routes for an array of items, each with its own main page and nested pages. Here is an example structure: myapp.com/[item] (main item page) myapp.com/[item]/about (about item page) myapp.com/[item]/faq (faq item page) My goal is to itera ...

javascriptreactjsreact-routerreact-router-dom

The concept of position() is often mistaken for a function

I am currently developing a slider and have included the code below: $(document).ready(function() { // MAKE SLIDER WIDTH EQUAL TO ALL SLIDES WIDTH var totalWidth = 0; $('.slide').each(function() { totalWidth = totalWi ...

javascriptjqueryslider

Gulp does not generate any files

Hey there, I'm brand new to using node.js and coding in general. I recently attempted to convert SCSS to CSS using gulp. My gulpfile.js seems to be correct, but when I try running "gulp styles" in the node.js command prompt, I receive the following ou ...

javascriptcssnode.jssassgulp

Is there a way for me to adjust the font size across the entire page?

Most CSS classes come with a fixed font-size value already set. For instance: font-size: 16px font-size: 14px etc. Is there a way to increase the font size of the entire page by 110%? For example, font-size: 16px -> 17.6 font-size: 14px -> 15.4 ...

javascriptcssvue.jssass

Modifying the height of the bar in Google Charts Timeline using react-google-charts

I am currently working on a Google Chart timeline using react-google-charts. <Chart chartType="Timeline" data={data} width="100%" options={{ allowHtml: true bar: { groupWidth: 10 }, }} ...

javascriptreactjschartsgoogle-visualizationreact-google-charts

Using JQuery's change function with a Button Group is a great way

I encountered an issue where my button group works with the on.click function but not with on.change. <div class="ui buttons"> <button class="ui button">Value 1</button> <button class="ui bu ...

javascriptjquerybuttongroup

What is the advantage of using event.target over directly referencing the element in eventListeners?

Suppose there are several buttons in an HTML file and the following code is executed: const buttons = document.querySelectorAll('button'); buttons.forEach((btn) => { btn.addEventListener('click', (e) => { console.log(btn.te ...

javascriptaddeventlistenertarget

Accessing a JSON string correctly using JavascriptSerializer in JavaScript

When working with JavaScript, I encountered an issue where the data retrieved from a data table and converted to javascriptSerializer was not refreshing correctly when changing dataset selection parameters. The problem occurred when trying to populate a ne ...

javascriptvb.netjsonserialization

Tips for creating text that adjusts to the size of a div element

I'm currently working on developing my e-commerce website. Each product is showcased in its own separate div, but I've encountered a challenge. The issue arises when the product description exceeds the limits of the div, causing it to overflow ou ...

javascripthtmlcssresponsive

What is the best way to link to a CSS file located in a different directory while being in a subdirectory?

For a project I am working on, I am developing a simple streaming site and have organized my files into different folders. These folders include: HTML CSS Shows Within the "Shows" folder, there is a subfolder named "Testshow". I am facing an issue with ...

htmlcssdirectory

Is there a way to implement a css/javascript property specifically for a div that is selected in the url?

Take for instance the scenario where I possess the URL example.com/#foo. In this case, CSS styling will be directed to the div with the id foo. If achieving this solely in CSS is not feasible, what methods in JavaScript or jQuery can be used efficiently ...

javascriptjquerycss

Experiencing difficulty in retrieving the title of the latest post

In my current Wordpress project, I'm facing an issue where a link is supposed to play a wav file based on the title of the post. For example, if the post title is 'one', then it should play one.wav from the uploads folder. However, the sound ...

phpjqueryhtmlajaxwordpress

What is the reason for requiring shaders to reside in an HTML file for a WebGL program?

In a recent forum thread, an individual posed the question about how to eliminate shaders from html. The discussion revolved around finding alternatives to embedding shaders in webGL code: WebGL - is there an alternative to embedding shaders in HTML? The ...

javascriptthree.jsglslwebgl

Ways to identify when a React child element is overflowing

tl;dr How can I create a component that hides overflow and toggles views with a button? For example, the user can initially see tabs 1, 2, and 3 while tabs 4, 5, and 6 are hidden. Clicking a button will hide tabs 1, 2, and 3, and show tabs 4, 5, and 6 with ...

javascripthtmlcssreactjs

Using GraphQL to set default values in data within a useEffect hook can lead to never

Here's the code snippet that I'm working with: const [localState, setLocalState] = useState<StateType[]>([]); const { data = { attribute: [] }, loading } = useQuery<DataType>(QUERY, { variables: { id: client && client.id ...

javascriptreactjstypescriptgraphqlreact-hooks

Changing font styles using the jMenu jQuery plugin: A step-by-step guide

I'm having trouble changing the font-family using CSS with jQuery's "jMenu" plugin. Here is the CSS I currently have: .jMenu{ position : absolute; top : 80px; left : 0px; width : 100%; display:table; margin:0; padding ...

jquerycssjmenu

Achieve a scrolling effect for just a specific section of an HTML page

Hey there! I'm currently working on adding scrolling text along the side of a webpage for a specific section. My goal is to have three different sections, each with text that stops scrolling when you reach it and then transitions to the next section o ...

javascripthtmlcss