• Special Downloads
    • Free Icons
    • Freebies
    • jQuery Scripts
  • Licences
    • Apache License
    • MIT License
    • CC License
    • GPL License
    • LGPL License
    • GNU License
    • Other Licenses
    • No License
  • Scripts & Apps
  • XHTML & CSS
  • Contact Greepit



Better Responsive Data Tables


 25 Feb 2013


Responsive web design (often abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

While working on a responsive site or app, Responsive Data Tables are critical and there are many approaches available but nothing worked for me. Few of them are listed:

  • http://css-tricks.com/responsive-data-tables/
  •  http://elvery.net/demo/responsive-tables/
  • http://themergency.com/footable/
  • http://mobifreaks.com/coding/responsive-data-tables-jquery/

Some of them rearranges the data, some hides the columns and some gives freedom to have all the data with a scrollbar or some simply just don’t look good and hard to read when viewed on smaller screens. So I decided to work on my own version.

better-responsive-tables

Better Responsive Data Tables is my version of responsive data tables, I divide every table row into a separate data block and rearranges the information.

The code has no license, free to use, attribution not required but appreciated.

Demo: http://greepit.com/Better-Responsive-Table/ResponsiveTable.html
Download: http://greepit.com/Better-Responsive-Table/ResponsiveTable.zip

    Share This


Related Posts


A jQuery Plugin for Responsive, Mobile Friendly Navigation: Naver
September 6, 2013

[Premium Like] Free Responsive Admin Template: TemplateVamp (Bootstrap Themes)
September 4, 2013

jQuery Responsive & Multi-level Navigation Menu Script: SlimMenu
September 3, 2013



1 Comment

Esnek Genişlikli Tablolar (Responsive) | Teknopod – Güncel Teknoloji Hablerleri
said 8 months ago

(Reply)



[...] Kaynak: Better Responsive Data Tables [...]



Leave a Reply Cancel reply


  • Recent Posts

    • Formance.js – jQuery Library for Formatting and Validating Form Fields
    • Content Organization Rules
    • Create a Mobile Website for Your Restaurant
    • WhatWeather – jQuery Weather’s Widgets Plugin
    • Free Set of Scalable Vector Stroke Icons – Coucou Icons
  • Search Resources

  • Categories

    • Actionscript
    • Ajax
    • Apache License
    • Articles & Books
    • Brushes
    • BSD License
    • Business Cards
    • CC License
    • Charts & Maps
    • Chat
    • CMS
    • Colors
    • Components
    • Design
    • Effects
    • Extras
    • Featured
    • File Managers
    • Flash
    • Fonts
    • Frameworks
    • Free Icons
    • Free License
    • Freebies
    • Freebies
    • Fun
    • Gallery
    • GNU License
    • GPL License
    • Icons
    • Images
    • Information
    • Interviews
    • Invoicing
    • Javascript
    • jQuery Scripts
    • LGPL License
    • Licences
    • Media
    • Menu and Navigation
    • MIT License
    • Mobile
    • Mobile Development
    • No License
    • Open Source
    • Open Source
    • Other Licenses
    • Pattern
    • PHP
    • Plugins
    • Popups & Notifications
    • PSD
    • Reviews
    • Scripts & Apps
    • SEO
    • Site of the week
    • Software
    • Software & Tools
    • Statistics
    • Templates
    • Texture
    • Tips and Tutorials
    • Tools
    • Useful Snippets
    • User Interface
    • Validations
    • Vectors
    • Web Application
    • Web Application
    • WP Theme
    • WYSIWYG HTML Editor
    • XHTML & CSS
  • Tags

    Actionscript AI Ajax Android Animation Canvas CMS CSS CSS3 Firefox Flash Framework Freebies Gallery Google Grid Html HTML5 Icon Icons Images iOS Javascript jQuery Library Mootools MYSQL Navigation Open Source Photoshop PHP Plugin PNG PSD Responsive Script Software Theme Tool Tools Twitter Vector Web Application Web Design Wordpress



    Copyright 2013 Greepit.com