adding table responsive

Yosiak-alv · Jul 18, 2024 · 6b2b726 · 6b2b726
1 parent 1066668
commit 6b2b726
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 31 deletions.
diff --git a/challenge_coffee_blog/courses.html b/challenge_coffee_blog/courses.html
@@ -29,36 +29,38 @@ <h1>Blog de café con consejos y cursos</h1>
     <main>
         <section class="courses">
             <h2>Nuestros Próximos Cursos y Talleres</h2>
-            <table>
-                <thead>
-                    <tr>
-                        <th>Imagen</th>
-                        <th>Título</th>
-                        <th>Precio</th>
-                        <th>Cupo</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><img src="img/curso1.jpg" alt="Técnicas de extracción de café"></td>
-                        <td>Técnicas de extracción de café</td>
-                        <td>Gratis</td>
-                        <td>20</td>
-                    </tr>
-                    <tr>
-                        <td><img src="img/curso2.jpg" alt="Taller para Tostar y Moler Granos"></td>
-                        <td>Taller para Tostar y Moler Granos</td>
-                        <td>$15.00</td>
-                        <td>30</td>
-                    </tr>
-                    <tr>
-                        <td><img src="img/curso3.jpg" alt="4 Recetas de Café para Principiantes"></td>
-                        <td>4 Recetas de Café para Principiantes</td>
-                        <td>Gratis</td>
-                        <td>20</td>
-                    </tr>
-                </tbody>
-            </table>
+            <div class="table-container">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Imagen</th>
+                            <th>Título</th>
+                            <th>Precio</th>
+                            <th>Cupo</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><img src="img/curso1.jpg" alt="Técnicas de extracción de café"></td>
+                            <td>Técnicas de extracción de café</td>
+                            <td>Gratis</td>
+                            <td>20</td>
+                        </tr>
+                        <tr>
+                            <td><img src="img/curso2.jpg" alt="Taller para Tostar y Moler Granos"></td>
+                            <td>Taller para Tostar y Moler Granos</td>
+                            <td>$15.00</td>
+                            <td>30</td>
+                        </tr>
+                        <tr>
+                            <td><img src="img/curso3.jpg" alt="4 Recetas de Café para Principiantes"></td>
+                            <td>4 Recetas de Café para Principiantes</td>
+                            <td>Gratis</td>
+                            <td>20</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </section>
     </main>
     <!-- footer -->

diff --git a/challenge_coffee_blog/styles/courses.css b/challenge_coffee_blog/styles/courses.css
@@ -34,6 +34,10 @@ table {
     margin-top: 20px;
 }
 
+.table-container {
+    position: relative;
+    overflow-x: auto;
+}
 thead {
     background-color: var(--primary-color);
     color: white;
@@ -61,4 +65,4 @@ tbody td img {
     width: 100px;
     height: auto;
     border-radius: 5px;
-}
+}