Responsive Table

Developer
Kevin
Size
2,303 Kb
Views
16,192
  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?

What is a responsive table? How do you make a responsive table? This script and codes were developed by Kevin on 13 October 2022, Thursday.

Responsive Table Previews
IQ Test

Responsive Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Table</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <table class="tg"> <thead> <tr class="titles"> <th>Brand</th> <th>Taurine</th> <th>Prebiotics & Probiotics</th> <th>Contains BHA or BHT</th> </tr> </thead> <tbody> <tr class="kmr"> <td>KMR&#174;</td> <td>YES</td> <td>YES</td> <td>NO</td> </tr> <tr class="petlac"> <td>Pet-Lac&#174;</td> <td>YES</td> <td>YES</td> <td>NO</td> </tr> <tr class="comp1"> <td>Competitor A</td> <td>YES</td> <td>NO</td> <td>YES</td> </tr> <tr class="comp2"> <td>Competitor B</td> <td>YES</td> <td>NO</td> <td>NO</td> </tr> <tr class="comp3"> <td>Competitor C</td> <td>YES</td> <td>NO</td> <td>NO</td> </tr> </tbody>
</table> <script src="js/index.js"></script>
</body>
</html>

Responsive Table - Script Codes CSS Codes

.tg { text-align: center; width: 100%; border-collapse: collapse; color: #847976;
}
.tg th { padding: 4px; font-weight: bold;
}
.tg td { padding: 4px;
}
.titles th:nth-of-type(odd) { background: #f8f7f7;
}
.titles th:nth-of-type(even) { background: #fbfafa;
}
.kmr td:nth-of-type(odd) { background: #fedab3;
}
.kmr td:nth-of-type(even) { background: #fee9d1;
}
.petlac td:nth-of-type(odd) { background: #ffe6cb;
}
.petlac td:nth-of-type(even) { background: #fff0e0;
}
.comp1 td:nth-of-type(odd) { background: #c7dbf1;
}
.comp1 td:nth-of-type(even) { background: #dde9f7;
}
.comp2 td:nth-of-type(odd) { background: #e1ecf8;
}
.comp2 td:nth-of-type(even) { background: #edf4fb;
}
.comp3 td:nth-of-type(odd) { background: #c7dbf1;
}
.comp3 td:nth-of-type(even) { background: #dde9f7;
}

Responsive Table - Script Codes JS Codes

//no js
Responsive Table - Script Codes
Responsive Table - Script Codes
Home Page Home
Developer Kevin
Username gnarfugh
Uploaded October 13, 2022
Rating 3
Size 2,303 Kb
Views 16,192
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!

Kevin (gnarfugh) Script Codes
Name
Ajax Flickr Search
Small fizzbuzz
Mess svg logo
A Pen by kevin
Google Maps api
Hover tabs with column wrapper
Understanding closures
React Scoreboard
Sticky nav
Highlight table
Create amazing marketing copy 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!