Edit style.css

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