Css striped table

Collection of free Bootstrap table code examples: responsive, with pagination, with search, with filter, scrollable, sortable, striped. Upgrade of April 2020 collection. 17 new items. CSS Tables Tailwind Tables Made with HTML / CSS / JS About a code Table V19 A free sales table template with avatars that works on mobile and desktop devices without a hitch. You can select or deselect rows or pick them individually. The free snippet also features hover effect. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: font-awesome.css, jquery.js, popper.js Bootstrap version: 4.3.1 Author rokr March 9, 2021 Made with HTML / CSS / JS About a code Table V18 A convenient and all-around free responsive dark table template that works for an assortment of different projects. It also has a hover effect function to highlight the row and a checkmark with an option select/deselect all. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: font-awesome.css, jquery.js, popper.js Bootstrap version: 4.3.1 Author rokr March 9, 2021 Made with HTML / CSS / JS About a code Table V16 If black is your favorite color, then this free dark table template will help you save time and effort since you can embed it quickly. The layout is 100% responsive and features a hover effect that highlights the entire row. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: font-awesome.css, jquery.js, popper.js Bootstrap version: 4.3.1 Author BBBootstrap Team February, 2021 Made with HTML / CSS / JS About a code Bootstrap 5 Table with Search and Checkboxes Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: font-awesome.css Bootstrap version: 5.0.0 Author rokr January 26, 2021 Made with HTML / CSS / JS About a code Table V6 This neat and free shopping cart table template is perfect for all eCommerce websites,

Moderator: Moderators fifonik Posts: 162 Joined: Fri Dec 02, 2016 3:52 am Location: Brisbane, AU Search for webmon I've implemented search functionality for webmon page.Happy to share the code if someone interested in.Unfortunately, I cannot supply proper PR as do not know how to organise everything correctly for gargoyle.In my case I've just inserted everything in single www/webmon.sh:- One line in html (added input)- A few JS functions at the end of the html in script-sectionP.S. Should I just post it here? Lantis Moderator Posts: 7037 Joined: Mon Jan 05, 2015 5:33 am Location: Australia Re: Search for webmon Post by Lantis » Mon Jul 08, 2024 8:02 am Sure, post it here. If it's all in the html I will probably rework it but that's fine. for the latest releasesPlease be respectful when posting. I do this in my free time on a volunteer basis. fifonik Posts: 162 Joined: Fri Dec 02, 2016 3:52 am Location: Brisbane, AU Re: Search for webmon Post by fifonik » Mon Jul 08, 2024 8:18 am www/webmon.shCode: Select all + ... // to be added at the end of the file before resetData(); function webmonSearch(input, container){ const table = container.getElementsByTagName('table')[0]; if (!table) return; // The 'table-striped' used to highlight odd/even rows using CSS // Unfortunately, this cannot be used if some rows are hidden // So removing the class and later assign odd/even classes directly to the rows table.classList.remove('table-striped'); const tbody = table.getElementsByTagName('tbody')[0]; if (!tbody) return; const s = input.value.trim(); if (s == '') { for (let i = 0, k = tbody.rows.length; i 0) value = value.slice(proto + 3).toUpperCase(); row.dataset.value = value; } if(host.indexOf(S) >= 0 || value.indexOf(S) >= 0){ row.style.display = ''; // 'table-row' can also be used row.className = visibleIndex++ % 2 ? 'even' : 'odd'; } else { row.style.display = 'none'; } } } } function webmonSearchInit(inputId, containerId){ const input = document.getElementById(inputId); if(!input) return; const container = document.getElementById(containerId); if(!container){ // No container for the table exists -- hide filter input input.style.display='none'; return; } // todo@ add debounce input.addEventListener('keyup', evt => webmonSearch(input, container), false); const observer = new MutationObserver((mutationList, observer) => { if(input.value.trim() == '') return; for (const mutation of mutationList) { if (mutation.type === 'childList' && mutation.addedNodes) { // New table added, re-filtering webmonSearch(input, container); break; } } }); observer.observe(container, { childList: true }); } webmonSearchInit('domain_search', 'webmon_domain_table_container'); Lantis Moderator Posts: 7037 Joined: Mon Jan 05, 2015 5:33 am Location:

Bootstrap table - 4 by HubSpot (@hubspot) on CodePen.Bootstrap Table with Striped RowsLet’s say you want to change the style of the table body section, not the head section. Using the .table-striped modifier class, you can add color to every other row within the section. This will give it a “zebra-striping” effect.To create this table, simply add “table-striped" after the .table class.See the Pen Bootstrap table - 5 by HubSpot (@hubspot) on CodePen.Bootstrap Table with Hoverable RowsNow let’s say you’d like the style of the rows to change only when a visitor hovers over them. Using the .table-hover modifier class, you can enable a hover state on table rows within a section.To create this table, add table-hover after the .table class.See the Pen Bootstrap table - 5 by HubSpot (@hubspot) on CodePen.Bootstrap Table with Colored RowsWith Bootstrap, you can also change the color of rows or cells using contextual classes. You can apply the following classes to elements (rows) or elements (individual cells):table-primarytable-secondarytable-successtable-dangertable-warningtable-infotable-lighttable-darkI can apply any of the above classes to different rows to make my table look something like this:See the Pen Bootstrap table - 6 by HubSpot (@hubspot) on CodePen.Bordered Bootstrap TableIf you’d like to have borders on all sides of the table rather than just the horizontal dividers, then you can use the .table-bordered modifier class. Add this class after the .table class.See the Pen Bootstrap table - 7 by HubSpot (@hubspot) on CodePen.If you’d like to remove all borders, then you can use the .table-borderless modifier class.Adding Bootstrap Tables to Your SiteTables can help organize large amounts of data on your site in a way that’s easy to read and digest for your visitors. Any of the table examples described above can be added and customized to your unique Bootstrap site. You’ll just need some familiarity