table – Génesis García Morilla

Tag Archive for: table

Show huge tables in any device

September 10, 2018/in CSS3, HTML5, JavaScript/by Génesis

We use Clusterize.js to display big data sets easily and CSS Grid to fix our HTML table.

<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>

Try to slide up/down and left/right in your phone/tablet.

Scrollable table (tbody) with 100% height and fixed header

June 3, 2018/in CSS3, HTML5/by Génesis

<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>

Sort table rows by clicking on table header column

May 24, 2018/in CSS3, HTML5, JavaScript/by Génesis

<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>

Scrollable table with fixed header

October 13, 2017/in CSS3, HTML5/by Génesis

Instead of using absolute positions, containers and so on you can use CSS Grid to set header and body.

Select HTML table columns by clicking on the headers

September 26, 2017/in HTML5, JavaScript/by Génesis