Tablepress: Make a 'versus' Comparison Table (with sticky header!)

Learn how to transform a plain TablePress table into a mobile-friendly head-to-head comparison table.
🔥 [Free Trial] Cloudways Superfast Hosting (what I use): https://cwdeal.com/tablepress

▸▸ 👨‍💻 Get the CSS code used in the video
https://www.buildthatwebsite.com/vide...

┬─┬ TablePress 101 ┬─┬
   • TablePress Tutorial: build Beautiful,...  

📦 More WordPress CSS Tutorials (playlist)
   • Chrome DevTools Crash Course - using ...  

__________Video Chapters___________
0:00 - What we're building
1:26 - Table Structure
1:42 - How to use COLSPAN
2:21 - Add a CSS class to your table
2:33 - Front-end HTML and tablepress classes
4:02 - Where to put CSS code
4:35 - Main table CSS
7:21 - Styling the table header
8:21 - Add a border between columns
8:55 - equal-width columns
9:50 - make it responsive (mobile-friendly)
12:20 - Writing a media query
13:16 - Design the product header (image and button)
15:32 - Fixed Table Header with position:sticky
16:32 - Faux border with box-shadow (hack)
17:05 - Build that next

















#tablepress #tutorial #wordpress