Close

Order Details Table with Search Filter

This is an example of a bootstrap order details table with a search filter, designed using HTML, CSS, and JavaScript. Bootstrap style sheets including the fonts, are imported to the form with their URLs. The body is given a styles set of color as #566787, background as #f5f5f5, font-family as 'Varela Round', sans-serif, and font-size as 13px. The refresh list button is given a background color of #03A9F4 whereas the export to excel button is given the background color #fff. Both buttons change their colors in a hover event, into #03a3e7 and #f2f2f2 respectively. Table title is given the styles color as #fff, background as #4b5366, padding as 16px 25px, margin as -20px -25px 10px, border-radius as 3px 3px 0 0, and font-size as 24px. The name section is given the color #566787, which changes to #2196F3 in a hover event. The status is also marked by colors which are, delivered as #10c469, shipped as #62c9e8, pending as #FFC107, and cancelled as #ff5b5b. Tooltip style has been used to display a popup in a hover event on view details icon whereas JavaScript functions are used to implement tooltip activation.

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.