ANCHO-EXPANCION-PADRE-HIJO

marzo 10, 2026

ANÁLISIS DEL PROBLEMA: ¿Por qué la tabla no se expande?

La causa principal: La tabla está DENTRO de una tarjeta con ancho limitado

En el segundo código, la tabla tiene width: 100%, pero ¿100% de qué? Del elemento que la contiene (su contenedor padre).

📊 COMPARATIVA VISUAL:

Primer código (Grid) - Tabla expandida:

┌─────────────────────────────────┐
│             MENÚ                 │
├─────────────────────────────────┤
│  Lista de Productos              │
│  ┌─────────────────────────────┐ │
│  │ TABLA (100% del contenedor) │ │
│  │ ID  Descripción  Sección    │ │
│  │ 1   desenzilador  henanienas│ │
│  └─────────────────────────────┘ │
│                                   │
└─────────────────────────────────┘
✓ La tabla ocupa todo el ancho del contenedor .contenido

Segundo código (Flexbox) - Tabla no expandida:

┌─────────────────────────────────┐
│             MENÚ                 │
│                                   │
│     ┌───────────────────┐        │
│     │      TARJETA       │        │
│     │ ┌───────────────┐ │        │
│     │ │ Sotelo        │ │        │
│     │ ├───────────────┤ │        │
│     │ │ TABLA         │ │        │
│     │ │ ID  Desc...   │ │        │
│     │ └───────────────┘ │        │
│     │        3          │        │
│     └───────────────────┘        │
│                                   │
└─────────────────────────────────┘
✗ La tabla está limitada por el ancho de la tarjeta

🧩 EXPLICACIÓN DETALLADA:

En el segundo código: Jerarquía de contenedores

<body>
    <div class="menu">...</div>
    
    <div class="contenido1">                    ← CONTENEDOR FLEX
        ⬇️ (justify-content: center)
        
        <div class="card">                       ← TARJETA (ANCHO LIMITADO)
            ⬇️
            <div class="card-body">              ← CONTENEDOR INTERNO
                ⬇️
                <table style="width: 100%">      ← TABLA

Problema: La cadena de anchos

.contenido1 - Es un contenedor flex que ocupa todo el ancho disponible
.card - ¡NO TIENE ANCHO DEFINIDO! (en tu CSS falta width)
.card-body - Hereda el ancho de .card
table - width: 100% = 100% del ancho de .card-body = 100% del ancho de .card

🔧 SOLUCIÓN: Haz que la tarjeta ocupe todo el ancho

Opción 1: Quitar el centrado y usar ancho completo

.contenido1 {
    padding-top: 10px;
    /* border: 1px solid red; */  /* Opcional: quitar borde */
    /* display: flex; */           /* QUITAR FLEX */
    /* justify-content: center; */  /* QUITAR CENTRADO */
}

.card {
    /* border: 5px solid green; */  /* Opcional: quitar borde */
    background-color: white;
    /* display: flex; */            /* QUITAR FLEX si no es necesario */
    /* flex-direction: column; */    /* QUITAR */
    width: 100%;                    /* ¡AÑADIR! Que ocupe todo */
    border-radius: 8px;
}

Opción 2: Mantener la tarjeta centrada pero con ancho completo

.contenido1 {
    padding-top: 10px;
    display: flex;
    justify-content: center;
}

.card {
    background-color: white;
    width: 100%;                    /* Ocupa todo el ancho disponible */
    max-width: 1200px;               /* Pero con un límite máximo */
    margin: 0 20px;                  /* Márgenes laterales */
    border-radius: 8px;
}

Opción 3: Hacer que la tabla ignore la tarjeta (no recomendado)

.card-body {
    padding: 20px 20px 0 20px;
    width: 100vw;                    /* Viewport width - Ocupa todo el ancho */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
/* ⚠️ Esto puede causar desbordamientos */

📝 CÓDIGO CORREGIDO (Opción recomendada):

/* SOLUCIÓN: Haz que la tarjeta ocupe todo el ancho */

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #f0f0f0;
}

.contenido1 {
    padding-top: 10px;
    /* border: 1px solid red; */  /* Quitamos borde de debug */
    display: flex;
    justify-content: center;
}

.card {
    /* border: 5px solid green; */  /* Quitamos borde de debug */
    background-color: white;
    display: flex;
    flex-direction: column;
    width: 100%;                    /* ¡CLAVE! Ocupa todo el ancho */
    max-width: 1200px;               /* Opcional: límite máximo */
    border-radius: 8px;
    margin: 0 20px;                  /* Espacio en los bordes */
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.card-header h1 {
    text-align: center;
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 20px;
    text-align: center;
}

/* Tabla ocupa todo el ancho del body */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

th {
    background-color: #4CAF50;
    color: white;
}

.menu {
    background-color: #333;
    padding: 15px;
    text-align: center;
}

.menu a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-size: 18px;
}

.menu a:hover {
    text-decoration: underline;
}

🎯 REGLAS DE ORO PARA RECORDAR:

width: 100% significa "100% del ancho de mi PADRE"
Si el padre tiene ancho limitado, el hijo también estará limitado
Flexbox con justify-content: center centra pero NO expande
Grid con 1fr SÍ expande automáticamente

Cuándo usar cada enfoque:

Situación	Mejor opción
Quieres centrar todo	Flexbox con ancho fijo
Quieres que ocupe todo	Grid con `1fr`
Tienes una tarjeta con contenido	Flexbox con `width: 100%`
Diseño completo de página	Grid

✅ RESUMEN FINAL:

La tabla no se expande porque:

La tabla dice "quiero ser 100% de ancho"
Su padre (card-body) dice "mi ancho es el de card"
card NO tiene ancho definido → toma el mínimo necesario
Resultado: Tabla = 100% de "nada" = tamaño mínimo

Solución: Dale a card un width: 100% para que ocupe todo el espacio disponible.

Buscar este blog

css-grid