Responsive Table

Developer
Kazu
Size
3,674 Kb
Views
10,120
  1. Responsive Table Previews
  2. Responsive Table HTML Codes
  3. Responsive Table CSS Codes
  4. Responsive Table JS Codes

How do I make an responsive table?

Forked from Jacob's Pen Responsive Table.. What is a responsive table? How do you make a responsive table? This script and codes were developed by Kazu on 28 October 2022, Friday.

Responsive Table Previews
IQ Test

Responsive Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Table</title> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:700,900' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <body> <section> <table id="table" class="tablesorter"> <thead> <div id="header"><h1 id="title">united states presidents of the <span>20<sup>th</sup></span> century</h1></div> <tr id="col-header"> <th>no.</th> <th>name</th> <th>inauguration</th> <th>tenure</th> <th>party</th> <th>vice president</th> <th>previous office</th> </tr> </thead> <tbody> <tr> <td><span>42<sup>nd</sup></span><small> president</small></td> <td>william j. clinton</td> <td><small>inaugurated: </small>january <span>20, 1993</span></td> <td><small>tenure: </small><span>2,922</span> days</td> <td><small>party: </small>dem</td> <td><small>vp: </small>al gore</td> <td><small>previously: </small>gov. of arkansas</td> </tr> <tr> <td><span>41<sup>st</sup></span><small> president</small></td> <td>george h. w. bush</td> <td><small>inaugurated: </small>january <span>20, 1989</span></td> <td><small>tenure: </small><span>1,461</span> days</td> <td><small>party: </small>gop</td> <td><small>vp: </small>dan quayle</td> <td><small>previously: </small>vice president</td> </tr> <tr> <td><span>40<sup>th</sup></span><small> president</small></td> <td>ronald w. regan</td> <td><small>inaugurated: </small>january <span>20, 1981</span></td> <td><small>tenure: </small><span>2,922</span> days</td> <td><small>party: </small>gop</td> <td><small>vp: </small>george h. w. bush</td> <td><small>previously: </small>gov. of california</td> </tr> <tr> <td><span>39<sup>th</sup></span><small> president</small></td> <td>james e. carter</td> <td><small>inaugurated: </small>january <span>20, 1977</span></td> <td><small>tenure: </small><span>1,461</span> days</td> <td><small>party: </small>dem</td> <td><small>vp: </small>walter mondale</td> <td><small>previously: </small>gov. of georgia</td> </tr> <tr> <td><span>38<sup>th</sup></span><small> president</small></td> <td>gerald r. ford</td> <td><small>inaugurated: </small>august <span>9, 1974</span></td> <td><small>tenure: </small><span>895</span> days</td> <td><small>party: </small>gop</td> <td><small>vp: </small>nelson rockefeller</td> <td><small>previously: </small>vice president</td> </tr> <tr> <td><span>37<sup>th</sup></span><small> president</small></td> <td>richard m. nixon</td> <td><small>inaugurated: </small>january <span>20, 1969</span></td> <td><small>tenure: </small><span>2,027</span> days</td> <td><small>party: </small>gop</td> <td><small>vp: </small>spiro agnew</td> <td><small>previously: </small>vice president</td> </tr> <tr> <td><span>36<sup>th</sup></span><small> president</small></td> <td>lyndon b. johnson</td> <td><small>inaugurated: </small>november <span>22, 1963</span></td> <td><small>tenure: </small><span>1,886</span> days</td> <td><small>party: </small>dem</td> <td><small>vp: </small>hubert humphrey</td> <td><small>previously: </small>vice president</td> </tr> <tr> <td><span>35<sup>th</sup></span><small> president</small></td> <td>john f. kennedy</td> <td><small>inaugurated: </small>january <span>20, 1961</span></td> <td><small>tenure: </small><span>1,036</span> days</td> <td><small>party: </small>dem</td> <td><small>vp: </small>lyndon b. johnson</td> <td><small>previously: </small>massachusetts senator</td> </tr> <tr> <td><span>34<sup>th</sup></span><small> president</small></td> <td>dwight d. eisenhower</td> <td><small>inaugurated: </small>january <span>20, 1953</span></td> <td><small>tenure: </small><span>2,922</span> days</td> <td><small>party: </small>gop</td> <td><small>vp: </small>richard nixon</td> <td><small>previously: </small>supreme allied cdr eu</td> </tr> <tr> <td><span>33<sup>rd</sup></span><small> president</small></td> <td>harry s. truman</td> <td><small>inaugurated: </small>april <span>12, 1945</span></td> <td><small>tenure: </small><span>2,840</span> days</td> <td><small>party: </small>dem</td> <td><small>vp: </small>alben w. barkley</td> <td><small>previously: </small>vice president</td> </tr> <tr> <td><span>32<sup>nd</sup></span><small> president</small></td> <td>franklin d. roosevelt</td> <td><small>inaugurated: </small>march <span>4, 1933</span></td> <td><small>tenure: </small><span>4,422</span> days</td> <td><small>party: </small>dem</td> <td><small>vp: </small>john n. garner</td> <td><small>previously: </small>gov. of new york</td> </tr> <tr> <td><span>31<sup>st</sup></span><small> president</small></td> <td>herbert c. hoover</td> <td><small>inaugurated: </small>march <span>4, 1929</span></td> <td><small>tenure: </small><span>1,461</span> days</td> <td><small>party: </small>gop</td> <td><small>vp: </small>charles curtis</td> <td><small>previously: </small>secretary of commerce</td> </tr> <tr> <td><span>30<sup>th</sup></span><small> president</small></td> <td>calvin coolidge</td> <td><small>inaugurated: </small>august <span>2, 1923</span></td> <td><small>tenure: </small><span>2,041</span> days</td> <td><small>party: </small>gop</td> <td><small>vp: </small>charles g. dawes</td> <td><small>previously: </small>vice president</td> </tr> <tr> <td><span>29<sup>th</sup></span><small> president</small></td> <td>warren g. harding</td> <td><small>inaugurated: </small>march <span>4, 1921</span></td> <td><small>tenure: </small><span>881</span> days</td> <td><small>party: </small>gop</td> <td><small>vp: </small>calvin coolidge</td> <td><small>previously: </small>ohio senator</td> </tr> <tr> <td><span>28<sup>th</sup></span><small> president</small></td> <td>woodrow wilson</td> <td><small>inaugurated: </small>march <span>4, 1913</span></td> <td><small>tenure: </small><span>2,922</span> days</td> <td><small>party: </small>dem</td> <td><small>vp: </small>thomas r. marshall</td> <td><small>previously: </small>gov. of new jersey</td> </tr> <tr> <td><span>27<sup>th</sup></span><small> president</small></td> <td>william h. taft</td> <td><small>inaugurated: </small>march <span>4, 1909</span></td> <td><small>tenure: </small><span>1,461</span> days</td> <td><small>party: </small>gop</td> <td><small>vp: </small>james s. sherman</td> <td><small>previously: </small>secretary of war</td> </tr> <tr> <td><span>26<sup>th</sup></span><small> president</small></td> <td>theodore roosevelt</td> <td><small>inaugurated: </small>september <span>14, 1901</span></td> <td><small>tenure: </small><span>2,728</span> days</td> <td><small>party: </small>gop</td> <td><small>vp: </small>charles w. fairbanks</td> <td><small>previously: </small>vice president</td> </tr> </tbody> </table> </section> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.0/jquery.tablesorter.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Table - Script Codes CSS Codes

html, body { background: #111; margin: 0; padding: 0; max-width: 100%;
}
section { margin: 50px auto; max-width: 1280px; box-shadow: -2px 4px 5px rgba(0,0,0,0.5);
}
span { font-size: 82%;
}
small { display: none; color: #2C3E50; font-size: 0.8em;
}
table { width: 100%; border-collapse: collapse; margin: 0; padding: 0;
}
thead, th, td, tr, p, h1 { font-family: "Source Sans Pro", Helvetica, sans-serif; font-variant: small-caps; font-weight: 700; font-size: 1.05em; letter-spacing: 2px; color: #ECF0F1; margin: 0; padding: 0; border: none; text-align: left; line-height: 1em; text-shadow: 0 1px rgba(0,0,0,0.3);
}
tr { height: 40px;
}
td, th { -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 23px;
}
th { color: #E64C3C;
}
#title { font-size: 1.4em; font-weight: 900; letter-spacing: 5px; text-align: center; padding: 0 23px;
}
#header { box-sizing: border-box; -moz-box-sizing: border-box; padding: 6px 0 8px; background: #E64C3C; min-height: 40px;
}
#col-header { background: #ECF0F1;
}
tbody > tr:nth-child(even) { background: #2980BA;
}
tbody > tr:nth-child(odd) { background: #3B97D3;
}
tbody tr:hover { background: #E64C3C;
}
#col-header th:hover { box-shadow: 0 4px 0 #E64C3C inset; cursor: pointer;
}
.header.headerSortUp { background-image: url('https://tinyurl.com/khn5wkt');
}
.header.headerSortDown { background-image: url('https://tinyurl.com/ljqfdyj');
}
.header { background-image: url('https://tinyurl.com/ohpb6n8'); background-repeat: no-repeat; background-position: center right;
}
@media screen and (max-width: 966px) { tr td:nth-child(2) { font-size: 1.5em; padding-top: 4px; padding-bottom: 10px; } td { text-align: center; float: left; min-width: 100%; } td:first-child { padding-top: 12px; color: #2C3E50; } td:first-child > small { font-size: 1em; } td:last-child { padding-bottom: 12px; } thead { display: none; } section { margin: auto; box-shadow: none; } small { display: initial; }
}

Responsive Table - Script Codes JS Codes

$(document).ready(function() { $("#table").tablesorter( {cssAsc:"headerSortUp", cssDesc:"headerSortDown", cssHeader:"header"} ); }
);
Responsive Table - Script Codes
Responsive Table - Script Codes
Home Page Home
Developer Kazu
Username carmerano
Uploaded October 28, 2022
Rating 3
Size 3,674 Kb
Views 10,120
Do you need developer help for Responsive Table?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kazu (carmerano) Script Codes
Name
Navigation Menu Hover Effect
A Pen by Kazu
LESS color spinning function - triadic
CSS Continuous Slide
ScrollMagic - FadeIn FadeOut
Flexbox
Responsive Menu Button
Full screen layout 1-pizza
Rader Chart
Hover Effect Test
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!