card se expanda según el tamaño de la tabla

 card se expanda según el tamaño de la tabla, necesitas hacer algunos ajustes clave. El problema principal es que la tabla puede desbordarse o no ajustarse correctamente. Aquí tienes la solución:

Si prefieres que el card siempre sea del ancho de la tabla (sin max-width):

css
.featured-card {
    max-width: none;        /* Elimina el límite máximo */
    width: fit-content;     /* Se ajusta al contenido */
    margin: 50px auto;
}

🎯 Solución Completa

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Featured Card - Con Tabla Adaptable</title>
    <style>
        /* ================ CONTENEDOR PRINCIPAL DE LA TARJETA ================ */
        .featured-card {
            display: grid;
            grid-template-rows: auto auto 1fr auto;
            gap: 0;
            
            /* ----- DIMENSIONES Y ESTILOS VISUALES ----- */
            width: 100%;
            max-width: 800px;           /* Aumentado para tablas más grandes */
            margin: 50px auto;
            border: 1px solid rgba(0, 0, 0, 0.175);
            border-radius: 8px;
            background-color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            overflow: hidden;            /* Importante: mantiene el border-radius */
        }

        /* ================ HEADER ================ */
        .card-header {
            background-color: #f8f9fa;
            padding: 16px 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
            font-size: 1.1rem;
            font-weight: 600;
            color: #212529;
        }

        /* ================ TÍTULO ================ */
        .card-title {
            padding: 20px 20px 0 20px;
            margin: 0;
            font-size: 1.5rem;
            font-weight: 500;
            color: #212529;
        }

        /* ================ CONTENEDOR DE LA TABLA ================ */
        /* NUEVO: Este es el truco para que la tabla sea responsive */
        .card-text {
            padding: 10px 20px;
            margin: 0;
            color: #6c757d;
            line-height: 1.5;
            font-size: 1rem;
            
            /* ----- IMPORTANTE: Para manejar tablas anchas ----- */
            overflow-x: auto;           /* Permite scroll horizontal si la tabla es muy ancha */
            -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
        }

        /* ================ ESTILOS PARA LA TABLA ================ */
        /* NUEVO: Estilos específicos para que la tabla se vea bien */
        .card-text table {
            width: 100%;                 /* La tabla ocupa todo el ancho disponible */
            border-collapse: collapse;    /* Bordes colapsados para mejor apariencia */
            margin: 0;                    /* Sin márgenes */
            font-size: 0.95rem;           /* Fuente ligeramente más pequeña */
            text-align: left;              /* Texto alineado a la izquierda */
            background-color: white;
        }

        /* Estilos para las celdas de la tabla */
        .card-text th,
        .card-text td {
            padding: 12px 15px;           /* Espaciado interno generoso */
            border: 1px solid #dee2e6;    /* Bordes sutiles */
        }

        /* Estilo para los encabezados */
        .card-text th {
            background-color: #f8f9fa;    /* Mismo color que header/footer */
            font-weight: 600;
            color: #212529;
            white-space: nowrap;           /* Evita que los encabezados se corten */
        }

        /* Estilo para las filas del cuerpo */
        .card-text td {
            color: #212529;
        }

        /* Efecto hover en filas (opcional) */
        .card-text tbody tr:hover {
            background-color: #f8f9fa;
            transition: background-color 0.2s ease;
        }

        /* ================ FOOTER ================ */
        .card-footer {
            background-color: #f8f9fa;
            padding: 16px 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.125);
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 15px;
        }

        /* ================ TEXTO PEQUEÑO ================ */
        .footer-text {
            color: #6c757d;
            font-size: 0.875rem;
            margin: 0;
        }

        /* ================ BOTÓN ================ */
        .card-button {
            display: inline-block;
            padding: 8px 20px;
            background-color: #0d6efd;
            color: white;
            text-decoration: none;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
            min-width: 120px;
        }

        .card-button:hover {
            background-color: #0b5ed7;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* ================ DISEÑO RESPONSIVE ================ */
        @media (max-width: 768px) {  /* Ajustado para tablets */
            .featured-card {
                margin: 20px;
                max-width: 100%;
            }
        }

        @media (max-width: 480px) {
            .featured-card {
                margin: 10px;
            }
            
            .card-footer {
                grid-template-columns: 1fr;
                gap: 10px;
                text-align: center;
            }

            /* En móviles, hacemos la tabla más legible */
            .card-text table {
                font-size: 0.85rem;      /* Fuente más pequeña en móvil */
            }

            .card-text th,
            .card-text td {
                padding: 8px 10px;       /* Padding reducido en móvil */
            }
        }
    </style>
</head>
<body>
    <div class="featured-card">
        <div class="card-header">
            Featured
        </div>
        
        <h5 class="card-title">Special title treatment</h5>
        
        <!-- El card-text ahora tiene overflow-x: auto -->
        <div class="card-text">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Descripción</th>
                        <th>Sección</th>
                        <th>Gross</th>
                        <th>Gross 2</th>
                        <th>Gross 3</th>  <!-- Añadí más columnas para probar -->
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>desenzilador das</td>
                        <td>henanienas</td>
                        <td>32.00</td>
                        <td>32.00</td>
                        <td>45.00</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>producto ejemplo con descripción larga para probar el scroll</td>
                        <td>sección principal</td>
                        <td>45.50</td>
                        <td>45.50</td>
                        <td>67.80</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>otro item</td>
                        <td>sección secundaria</td>
                        <td>12.99</td>
                        <td>12.99</td>
                        <td>15.99</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div class="card-footer">
            <small class="footer-text">Last updated 3 mins ago</small>
            <a href="#" class="card-button">Go somewhere</a>
        </div>
    </div>
</body>
</html>

🔑 Claves para que funcione:

1. Overflow horizontal en el contenedor de la tabla

css
.card-text {
    overflow-x: auto;  /* Si la tabla es más ancha que el card, aparece scroll */
}

2. Tabla con ancho completo

css
.card-text table {
    width: 100%;        /* La tabla ocupa todo el ancho disponible */
    border-collapse: collapse;
}

3. Evitar que los encabezados se corten

css
.card-text th {
    white-space: nowrap;  /* Los encabezados no se parten en varias líneas */
}

📊 Comportamiento:

  • Si la tabla es pequeña: Ocupará el ancho natural del contenido

  • Si la tabla es mediana: Se expandirá hasta el max-width del card (800px)

  • Si la tabla es muy ancha: Aparecerá scroll horizontal dentro del card

🎨 Personalización adicional:

Si quieres que la tabla tenga un ancho mínimo:

css
.card-text table {
    min-width: 600px;  /* La tabla nunca será más pequeña que 600px */
}

Si prefieres que el card siempre sea del ancho de la tabla (sin max-width):

css
.featured-card {
    max-width: none;        /* Elimina el límite máximo */
    width: fit-content;     /* Se ajusta al contenido */
    margin: 50px auto;
}

¡Así el card se expandirá dinámicamente según el contenido de la tabla!

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más