วิธีสร้างตารางราคา Responsive (Pricing Table) ด้วย CSS

Pricing Table การ์ดราคา 3 แบบ ปรับตัวตามหน้าจอ

ใช้ Flexbox/Float + Media Query ทำให้การ์ดราคาจัดเรียงแนวนอนบน Desktop และซ้อนแนวตั้งบน Mobile (max-width: 600px)

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    * { box-sizing: border-box; }
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .compareFields { float: left; width: 50%; padding: 8px; }
    .pricing {
      list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0;
      transition: 0.3s;
    }
    .pricing:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); }
    .pricing .header { background-color: rgb(52, 31, 129); color: white; font-size: 25px; }
    .pricing li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; }
    .button { border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; }
    @media only screen and (max-width: 600px) {
      .compareFields { width: 100%; }
    }
  </style>
</head>
<body>
  <h1 style="text-align:center">Responsive Pricing Tables</h1>
  <div class="compareFields">
    <ul class="pricing">
      <li class="header">Free Membership</li>
      <li>20 messages</li> <li>No customer Support</li> <li>98% uptime</li>
      <li>1GB per day</li> <li>50GB storage</li>
      <li><a href="#" class="button" style="background-color: rgb(52, 31, 129);">Register</a></li>
    </ul>
  </div>
  <div class="compareFields">
    <ul class="pricing">
      <li class="header" style="background-color:rgb(250, 136, 59)">Advanced Membership</li>
      <li>100 messages</li> <li>24*7 customer support</li> <li>99.9% uptime</li>
      <li>8GB per day</li> <li>150GB storage</li>
      <li><a href="#" class="button" style="background-color:rgb(250, 136, 59)">Register</a></li>
    </ul>
  </div>
</body>
</html>

แนวทางปัจจุบันแนะนำ (Flexbox/Grid)

.pricing-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.pricing-card { /* สไตล์การ์ด */ }

Grid auto-fit + minmax ทำ responsive อัตโนมัติ ไม่ต้อง media query คงที่ เหมาะกับจำนวนการ์ดไม่คงที่

UI Tips

• เน้นแผนแนะนำ (Popular) ด้วยสี/ขนาด/เงาแตกต่าง
• รายการฟีเจอร์ใช้ icon ✓/✗ แทนข้อความยาว
• ปุ่ม CTA ควรมี contrast สูง กว้างเต็มการ์ด
• เพิ่ม transition: box-shadow 0.3s ให้ hover เนียน