diff --git a/style.css b/style.css index 0d6c99c2e041b1f3ce85abda9ea51710267c0728..57476abe427e275265b0ba015637f936818f69b1 100644 --- a/style.css +++ b/style.css @@ -14,7 +14,7 @@ body { padding: 20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; - text-align: center; + text-align: center; /* ทำให้เนื้อหาใน container อยู่ตรงกลาง */ } /* หัวข้อ */ @@ -25,9 +25,8 @@ h2 { /* ตารางสินค้า */ .table-container { - width: 80%; - margin: auto; - overflow-x: auto; /* ป้องกันการล้นของตาราง */ + width: 80%; /* จำกัดความกว้างของตาราง */ + margin: auto; /* จัดให้อยู่ตรงกลาง */ } table { @@ -41,7 +40,7 @@ table, th, td { } th, td { - padding: 12px; + padding: 10px; text-align: center; } @@ -50,18 +49,37 @@ th { color: white; } -/* ปุ่มเพิ่ม-ลดจำนวนสินค้า */ -.qty-btn { - padding: 5px 10px; - background-color: #007BFF; +/* ฟอร์ม */ +form { + text-align: center; + margin: 20px 0; +} + +input, button { + padding: 10px; + margin: 5px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background-color: #28a745; color: white; - border: none; cursor: pointer; - border-radius: 5px; } -.qty-btn:hover { - background-color: #0056b3; +button:hover { + background-color: #218838; +} + +/* ลิงก์ */ +a { + text-decoration: none; + color: #007BFF; +} + +a:hover { + text-decoration: underline; } /* ปุ่มลบ */ @@ -74,24 +92,46 @@ th { color: darkred; } -/* ปุ่มชำระเงิน */ -.checkout-container { - text-align: center; - margin-top: 20px; +/* ตะกร้าสินค้า */ +.cart-container { + max-width: 600px; + margin: auto; } +.cart-container table { + width: 100%; +} + +.cart-container th, .cart-container td { + padding: 10px; +} + +/* ปุ่มเพิ่ม-ลดจำนวนสินค้า */ +.qty-btn { + padding: 5px 10px; + background-color: #007BFF; + color: white; + border: none; + cursor: pointer; + border-radius: 5px; +} + +.qty-btn:hover { + background-color: #0056b3; +} + +/* ปุ่มชำระเงิน */ .checkout-btn { - display: inline-block; - width: auto; + display: block; + width: 100%; + text-align: center; background-color: #ffc107; - padding: 12px 20px; + padding: 10px; border-radius: 5px; font-size: 18px; color: black; - font-weight: bold; - text-decoration: none; } .checkout-btn:hover { background-color: #e0a800; -} +} \ No newline at end of file