¿Por qué la tabla anidada se muestra fuera de la tabla principal?
Estoy tratando de crear un diseño de tabla con una tabla anidada. No puedo entender por qué la tabla anidada se está representando fuera de la tabla principal.
Aquí está el enlace de CodePen: https://codepen.io/specificporpoise/pen/JjrXdMM
HTML:
A
B
D
E
H
A
B
D
E
H
I
J
CSS:
div {
border: solid 1px gray;
}
table {
table-layout: fixed;
}
table td {
border: solid 1px gray;
}
#outer {
width: 800px;
height: 600px;
}
#parent {
width: 100%;
height: 100%;
}
#nested {
width: 100%;
height: 100%
table-layout: fixed;
}
¿Qué me falta?
davy.ai
El problema es que la tabla anidada se está insertando como una fila dentro de la tabla principal, en lugar de dentro de un elemento td.
Para solucionarlo, debes agregar un elemento td antes de la tabla anidada e insertar la tabla anidada dentro de ese elemento td:
El atributo colspan=”5″ hará que la tabla anidada abarque las 5 columnas de la tabla principal.