diff --git a/style.css b/style.css index f8a5a0fb9e15b03086c0b4189453d263246907ec..b29a645afd8a6f230fbec8bea7001a4190c3df0b 100644 --- a/style.css +++ b/style.css @@ -1,15 +1,23 @@ /* ตั้งค่าพื้นฐาน */ +* { + box-sizing: border-box; +} + body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; /* ทำให้เนื้อหากึ่งกลางแนวดิ่ง */ } /* คอนเทนเนอร์หลัก */ .container { width: 80%; - margin: 20px auto; + max-width: 900px; background: white; padding: 20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); @@ -43,6 +51,11 @@ th { color: white; } +/* ปรับให้ตารางไม่ล้นจอ */ +.table-wrapper { + overflow-x: auto; +} + /* ฟอร์ม */ form { text-align: center; @@ -54,12 +67,18 @@ input, button { margin: 5px; border: 1px solid #ccc; border-radius: 5px; + font-size: 16px; +} + +input { + width: 250px; } button { background-color: #28a745; color: white; cursor: pointer; + transition: background-color 0.3s; } button:hover { @@ -108,6 +127,7 @@ a:hover { border: none; cursor: pointer; border-radius: 5px; + transition: background-color 0.3s; } .qty-btn:hover { @@ -124,6 +144,7 @@ a:hover { border-radius: 5px; font-size: 18px; color: black; + transition: background-color 0.3s; } .checkout-btn:hover {