jQuery Table Plugin

Add-ons

2026-07-26 02:48 3 次浏览 • 0 次下载 20.7KB

Plugin Description: jQuery table plugin.

Quick Tutorial

Tables are an important element of web design, allowing users to intuitively understand certain data. The table used in this demo does not follow the standard HTML table structure. Instead, it uses unordered lists to create the table, providing better responsiveness.

HTML Structure

We use a section element as the table structure. The header contains the first column of the table. The reason for not placing the header and other columns in the same div is that the header is fixed on mobile devices. Its parent element determines its position within the section.

<section>
  <header>
    <h2>Features</h2>
    <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>...</li>
    </ul>
  </header>
   
  <div class="cd-table-container">
    <div class="cd-table-wrapper">
   
      <div class="cd-table-column">
        <h2>Plan 1</h2>
        <ul>
          <li>1 GB</li>
          <li>2</li>
          <li>...</li>
        </ul>
      </div> <!-- cd-table-column -->
   
      <div class="cd-table-column">
        <h2>Plan 2</h2>
        <ul>
          <li>2 GB</li>
          <li>5</li>
          <li>...</li>
        </ul>
      </div> <!-- cd-table-column -->
   
    </div> <!-- cd-table-wrapper -->
  </div> <!-- cd-table-container -->
</section>

CSS Styles

One thing worth noting in the CSS file is that we use two div elements to wrap the table columns (.cd-table-container and .cd-table-wrapper). Why are two div elements needed? The first div is set to 90% width with overflow-x:auto. The second div has the width of the entire table. This approach leaves some margin on the right side of the screen, allowing the table content to scroll when the table width exceeds 90%.

JAVASCRIPT

In the demo, jQuery is only used to remove the small arrow on the right side of the table on small-screen devices.

jQuery(document).ready(function($){
  var $columns_number = $('#cd-table .cd-table-container').find('.cd-table-column').length;
    
  $('.cd-table-container').on('scroll', function(){ 
    $this = $(this);
    //hide the arrow on scrolling
    if( $this.scrollLeft() > 0 ) {
      $('.cd-scroll-right').hide();
    }
    //remove color gradient when table has scrolled to the end
    var total_table_width = parseInt($('.cd-table-wrapper').css('width').replace('px', '')),
      table_viewport = parseInt($('#cd-table').css('width').replace('px', ''));
        
    if( $this.scrollLeft() >= total_table_width - table_viewport - $columns_number) {
      $('#cd-table').addClass('table-end');
    } else {
      $('#cd-table').removeClass('table-end');
    }
  });
  
  //scroll the table (scroll value equal to column width) when clicking on the .cd-scroll-right arrow
  $('.cd-scroll-right').on('click', function(){
    $this= $(this);
    var column_width = $(this).siblings('.cd-table-container').find('.cd-table-column').eq(0).css('width').replace('px', ''),
      new_left_scroll = parseInt($('.cd-table-container').scrollLeft()) + parseInt(column_width);
      
    $('.cd-table-container').animate( {scrollLeft: new_left_scroll}, 200 );
    $this.hide();
  });
});