0
402
VistasCómo tener una fila de ancho completo en una tabla con imagen
Quiero insertar una fila de ancho completo como se muestra en la imagen de abajo por Flecha
colspan , rowspan pero no funcionó para mí, así que eliminé la pregunta (de lo contrario, la pregunta se estropeará).
esto es lo que he intentado: https://jsfiddle.net/eabangalore/y3Lt470z/16/
table td { padding: 5px; } <table width="500px" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th style="width:3%"></th> <th style="width:10%">Name</th> <th style="width:10%">Age</th> <th style="width:10%">Designation</th> </tr> </thead> <tbody> <tr> <td> <div style="width:50px;height:70px;border-radius:50%;"> <img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/> </div> </td> <td align="center">Alpha</td> <td align="center">21 year</td> <td align="center">Software</td> </tr> <tr> <td> <div style="width:50px;height:70px;border-radius:50%;"> <img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/> </div> </td> <td align="center">Alpha</td> <td align="center">21 year</td> <td align="center">Software</td> </tr> </tbody> </table>Pregunta: quiero agregar una fila de ancho completo como se muestra en la flecha en el área de color rojo (imagen de arriba)
Nota: no puedo cambiar la tabla a div s porque estoy trabajando en un proyecto de mantenimiento.
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
Estás buscando esta estructura de mesa. Tienes que usar una vez rowspan y una vez colspan .
<table width="500px" border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th style="width:3%"></th> <th style="width:10%">Name</th> <th style="width:10%">Age</th> <th style="width:10%">Designation</th> </tr> </thead> <tr> <th class="" rowspan="2"> <img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/> </th> <th class="">1</th> <th class="">2</th> <th class="">3</th> </tr> <tr> <td class="" colspan="4">new row</td> </tr> <tr> <th class="" rowspan="2"> <img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/> </th> <th class="">a</th> <th class="">b</th> <th class="">c</th> </tr> <tr> <td class="" colspan="4">new row</td> </tr> </table>Nota pequeña: use en su lugar clases de estilo en línea.
·
Santiago Trujillo
Denunciar
Responde la pregunta