Ultra wide responsive tables using footable plugin

Developer

Size

3,752 Kb

Views

16,192

Ultra wide responsive tables using footable plugin Previews
Ultra wide responsive tables using footable plugin HTML Codes
Ultra wide responsive tables using footable plugin CSS Codes
Ultra wide responsive tables using footable plugin JS Codes

How do I make an ultra wide responsive tables using footable plugin?

What is a ultra wide responsive tables using footable plugin? How do you make a ultra wide responsive tables using footable plugin? This script and codes were developed by Utcwebdev on 26 November 2022, Saturday.

Ultra wide responsive tables using footable plugin Previews

Ultra wide responsive tables using footable plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ultra wide responsive tables using footable plugin</title> <meta name='viewport' content='width=device-width'> <link rel='stylesheet prefetch' href='http://www.utc.edu/_resources/Kickstrap/apps/footable/css/footable.core.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Standard UTC Stylesheet -->
<link rel="stylesheet" type="text/css" href="//www.utc.edu/_resources/css/kickstrap.css?ver=2.3.1.10" media="all">
<table class="table toggle-square-filled">
<tbody>
<thead>
<tr> <th scope="col" data-toggle="true" width="2%">Hours</th> <th scope="col" data-hide="phone,tablet" width="6%">Maintenance</th> <th scope="col" data-hide="phone,tablet" width="6%">Program &amp; Service Fee</th> <th scope="col" data-hide="phone,tablet" width="6%">Debt Service</th> <th scope="col" data-hide="phone,tablet" width="6%">Athletic Fee</th> <th scope="col" data-hide="phone,tablet" width="6%">Health Fee</th> <th scope="col" data-hide="phone,tablet" width="6%">Green Fee</th> <th scope="col" data-hide="phone,tablet" width="6%">Library Fee</th> <th scope="col" data-hide="phone,tablet" width="6%">Facilities Fee</th> <th scope="col" data-hide="phone,tablet" width="6%">Facilities Match Fee</th> <th scope="col" data-hide="phone,tablet" width="6%">Tech Fee</th> <th scope="col" width="7%"><strong>In-State Total</strong></th> <th scope="col" width="7%"><strong>Out-of-State Tuition</strong></th> <th scope="col" width="7%"><strong>Out-of-State Total</strong></th> <th scope="col" data-hide="phone,tablet,tabland" data-ignore="true" width="2%">Hours</th></tr> </thead>
<tr>
<td>1</td>
<td>253</td>
<td>10</td>
<td>13</td>
<td>20</td>
<td>25</td>
<td>10</td>
<td>25</td>
<td>50</td>
<td>25</td>
<td>12</td>
<td><strong>443</strong></td>
<td>634</td>
<td><strong>1077</strong></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>506</td>
<td>20</td>
<td>26</td>
<td>40</td>
<td>25</td>
<td>10</td>
<td>25</td>
<td>50</td>
<td>25</td>
<td>24</td>
<td><strong>751</strong></td>
<td>1268</td>
<td><strong>2019</strong></td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>759</td>
<td>30</td>
<td>39</td>
<td>60</td>
<td>25</td>
<td>10</td>
<td>25</td>
<td>50</td>
<td>25</td>
<td>36</td>
<td><strong>1059</strong></td>
<td>1902</td>
<td><strong>2961</strong></td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>1012</td>
<td>40</td>
<td>52</td>
<td>80</td>
<td>25</td>
<td>10</td>
<td>25</td>
<td>50</td>
<td>25</td>
<td>48</td>
<td><strong>1367</strong></td>
<td>2536</td>
<td><strong>3903</strong></td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>1265</td>
<td>50</td>
<td>65</td>
<td>100</td>
<td>25</td>
<td>10</td>
<td>25</td>
<td>50</td>
<td>25</td>
<td>60</td>
<td><strong>1675</strong></td>
<td>3170</td>
<td><strong>4845</strong></td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>1518</td>
<td>60</td>
<td>78</td>
<td>120</td>
<td>25</td>
<td>10</td>
<td>25</td>
<td>50</td>
<td>25</td>
<td>72</td>
<td><strong>1983</strong></td>
<td>3804</td>
<td><strong>5787</strong></td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>1771</td>
<td>70</td>
<td>91</td>
<td>140</td>
<td>25</td>
<td>10</td>
<td>25</td>
<td>50</td>
<td>25</td>
<td>84</td>
<td><strong>2291</strong></td>
<td>5072</td>
<td><strong>6729</strong></td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>2024</td>
<td>80</td>
<td>104</td>
<td>160</td>
<td>25</td>
<td>10</td>
<td>25</td>
<td>50</td>
<td>25</td>
<td>96</td>
<td><strong>2599</strong></td>
<td>5706</td>
<td><strong>7671</strong></td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>2277</td>
<td>90</td>
<td>117</td>
<td>180</td>
<td>25</td>
<td>10</td>
<td>25</td>
<td>50</td>
<td>25</td>
<td>100</td>
<td><strong>2899</strong></td>
<td>5706</td>
<td><strong>8605</strong></td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>2530</td>
<td>100</td>
<td>130</td>
<td>200</td>
<td>25</td>
<td>10</td>
<td>25</td>
<td>50</td>
<td>25</td>
<td>100</td>
<td><strong>3195</strong></td>
<td>6340</td>
<td><strong>9535</strong></td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>2783</td>
<td>110</td>
<td>143</td>
<td>220</td>
<td>25</td>
<td>10</td>
<td>25</td>
<td>50</td>
<td>25</td>
<td>100</td>
<td><strong>3491</strong></td>
<td>6974</td>
<td><strong>10465</strong></td>
<td>11</td>
</tr>
<tr>
<td><strong>12</strong></td>
<td><strong>3032</strong></td>
<td><strong>120</strong></td>
<td><strong>150</strong></td>
<td><strong>240</strong></td>
<td><strong>25</strong></td>
<td><strong>10</strong></td>
<td><strong>25</strong></td>
<td><strong>50</strong></td>
<td><strong>25</strong></td>
<td><strong>100</strong></td>
<td><strong>3777</strong></td>
<td><strong>7603</strong></td>
<td><strong>11380</strong></td>
<td><strong>12</strong></td>
</tr>
</tbody>
</table> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://www.utc.edu/_resources/Kickstrap/apps/footable/js/footable.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ultra wide responsive tables using footable plugin - Script Codes CSS Codes

/* ---------------------------------------------- Including footable.core.css via settings gear. this would be done via  in OU Campus see .pcf source of school-leadership/courses/index.pcf ---------------------------------------------- */
/* custom footable CSS */
.footable { border-collapse: separate; border-spacing: 0; border: 1px solid #cccccc; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; font-family: 'trebuchet MS', 'Lucida sans', Arial; font-size: 14px; color: #444444; background: #ffffff;
}
.footable > thead > tr:first-child > th.footable-first-column,
.footable > thead > tr:first-child > td.footable-first-column { -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0;
}
.footable > thead > tr:first-child > th.footable-last-column,
.footable > thead > tr:first-child > td.footable-last-column { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0;
}
.footable > thead > tr:first-child > th.footable-first-column.footable-last-column,
.footable > thead > tr:first-child > td.footable-first-column.footable-last-column { -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
}
.footable > thead > tr > th { border-left: 1px solid #cccccc; border-top: 1px solid #cccccc; padding: 10px; text-align: left;
}
.footable > thead > tr > th,
.footable > thead > tr > td { background-color: #dce9f9; background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9)); background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9); background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9); background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9); background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9); background-image: linear-gradient(to bottom, #ebf3fc, #dce9f9); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset; border-top: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.footable > thead > tr > th.footable-first-column,
.footable > thead > tr > td.footable-first-column { border-left: none;
}
.footable.breakpoint > tbody > tr.footable-row-detail { background: #eeeeee;
}
.footable.breakpoint > tbody > tr.footable-row-detail > .footable-row-detail-cell { border-left: none;
}
.footable > tbody img { vertical-align: middle;
}
.footable > tbody > tr:hover { background: #fbf8e9;
}
.footable > tbody > tr:last-child > td.footable-first-column { -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px;
}
.footable > tbody > tr:last-child > td.footable-last-column { -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0;
}
.footable > tbody > tr:last-child > td.footable-first-column.footable-last-column { -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
}
.footable > tbody > tr > td { border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; padding: 10px; text-align: left;
}
.footable > tbody > tr > td.footable-first-column { border-left: none;
}
.footable > tfoot > tr > th,
.footable > tfoot > tr > td { background-color: #dce9f9; background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9)); background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9); background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9); background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9); background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9); background-image: linear-gradient(to bottom, #ebf3fc, #dce9f9); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset; border-top: 1px solid #cccccc; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); padding: 10px;
}
.footable .pagination { margin: 20px 0;
}
.footable .pagination > ul { display: inline-block; margin: 0; padding: 0; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: #ffffff;
}
.footable .pagination > ul > li { display: inline;
}
.footable .pagination > ul > li > a,
.footable .pagination > ul > li > span { float: left; padding: 4px 12px; line-height: 20px; text-decoration: none; border: 1px solid #cccccc; border-left-width: 0;
}
.footable .pagination > ul > li:first-child > a,
.footable .pagination > ul > li:first-child > span { -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; border-top-left-radius: 4px; border-left-width: 1px;
}
.footable .pagination > ul > li:last-child > a,
.footable .pagination > ul > li:last-child > span { -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; border-bottom-right-radius: 4px;
}
.footable .pagination > ul > li > a:hover,
.footable .pagination > ul > li > a:focus,
.footable .pagination > ul > .active > a,
.footable .pagination > ul > .active > span { background-color: #eeeeee;
}
.footable .pagination > ul > .active > a,
.footable .pagination > ul > .active > span { color: #444444; cursor: default;
}
.footable .pagination > ul > .disabled > span,
.footable .pagination > ul > .disabled > a,
.footable .pagination > ul > .disabled > a:hover,
.footable .pagination > ul > .disabled > a:focus { color: #cccccc; cursor: default; background-color: #ebf3fc;
}
.footable .pagination.pagination-centered { text-align: center;
}
.footable .pagination.pagination-right { text-align: center;
}
.footable-odd { background-color: #f7f7f7;
}

Ultra wide responsive tables using footable plugin - Script Codes JS Codes

// including footable.js via settings gear.
// this would be done via <footcode> in OU Campus
// see .pcf source of school-leadership/courses/index.pcf for example
// custom footable foo
$(function () { $('.table').footable( { breakpoints: { tabland:1200, tablet:959, phone:479 } } );
});
$(function () { $('table').bind('footable_breakpoint', function() { $('table').trigger('footable_expand_first_row'); }).footable();
});

Home Page	Home
Developer	Utcwebdev
Username	utcwebdev
Uploaded	November 26, 2022
Rating	3
Size	3,752 Kb
Views	16,192

Do you need developer help for Ultra wide responsive tables using footable plugin?

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!

Utcwebdev (utcwebdev) Script Codes

Name	Size
Bootstrap search form with dropdown parameters	2,790 Kb
Blackboard login form	3,418 Kb
Off-Canvas Side Nav With Bootstrap 2	3,212 Kb
Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion	3,804 Kb
Sorting and filtering a huge table using footable plugin	10,278 Kb
A Pen by utcwebdev	2,856 Kb
Javascript search within table	5,060 Kb
Bootstrap jQuery radio buttons reveal help message feedback	4,076 Kb
Tooltip only on specific selectors	3,345 Kb
Ultra wide responsive tables using footables plugin	3,754 Kb

Create amazing video scripts 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!

Similar Scripts & Codes

Name	Username	Size
Pure CSS Tooltip	APinix	2,815 Kb
The Rope	Chribbe	2,886 Kb
Search Box in Content Moves to Fixed Header	Chriscoyier	2,768 Kb
The Fantastic Mr Fox	MalZiiirA	10,435 Kb
Practice using Wixel	Emnk	3,057 Kb
Bootstrap Responsive Menu Drawer	JesseGlacken	3,777 Kb
A Pen by Kenny Mark	Kennymark	5,574 Kb
Elon Musk - Tribute Page - FreeCodeCamp	Yunnimun	8,615 Kb
Weather App	Kw7oe	3,162 Kb
Loading...	Adamjacob	2,384 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!