1

Tengo una duda, cómo podría tener una tabla de este estilo:

introducir la descripción de la imagen aquí

Teniendo una fila única que contenga las 3 filas internas, sin tener que tener que generar 3 filas o <tr> y estas vayan calzando en la columna correspondiente.

La idea es poder tener y ver la primera fila con sus filas internas de esta manera: introducir la descripción de la imagen aquí

Como una única fila y no separada en 3 o x tr:

introducir la descripción de la imagen aquí

El código que tengo es este:

table {
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}

table th {
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #999999;
  padding: 0px 5px;
}

table td {
  border: 1px solid #999999;
  padding: 5px 5px;
}
<table class='tbl'>
  <thead>
    <tr>
      <th>Licitación</th>
      <th>Nombre Licitación</th>
      <th>Fecha Inicio</th>
      <th>Fecha Término</th>
      <th>Monto Tope</th>
      <th>Monto Ejecutado</th>
      <th>Estado Licitación</th>
      <th>Consumo</th>
      <th>Detalle</th>
      <th>Administrar</th>
    </tr>
  </thead>
  <tbody>
    <tr class='FilaPrincipal' rowspan='3'>
      <td rowspan='3'>texto</td>
      <td rowspan='3'>texto</td>
      <td rowspan='1'>texto</td>
      <td rowspan='1'>texto</td>
      <td rowspan='1'>texto</td>
      <td rowspan='1'>texto</td>
      <td>texto</td>
      <td rowspan='3'>texto</td>
      <td rowspan='3'>texto</td>
      <td rowspan='3'>texto</td>
    </tr>
    <tr>
      <td rowspan='1'>texto</td>
      <td rowspan='1'>texto</td>
      <td rowspan='1'>texto</td>
      <td rowspan='1'>texto</td>
      <td rowspan='1'>texto</td>
    </tr>
    <tr>
      <td rowspan='1'>texto</td>
      <td rowspan='1'>texto</td>
      <td rowspan='1'>texto</td>
      <td rowspan='1'>texto</td>
      <td rowspan='1'>texto</td>
    </tr>

    <tr class='FilaPrincipal'>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
    </tr>
  </tbody>
</table>

agradezco de antemano su ayuda

1
  • En el caso de que una celda contenga un texto muy largo, la solución que usas es la única forma (según yo, ja) donde las celdas hermanas a la fila se agrandarían automáticamente para igualar el alto. Cualquier otra forma tendrías que ver cómo acomodar las "celdas en la misma fila" para igualar el alto.
    – Marcos
    el 20 may. 2022 a las 15:30

2 respuestas 2

0

En el caso de que el texto en las celdas no supere "un renglón", lo que podrías crear tablas dentro de las celdas donde van más de 1 "fila".

Ejemplo:

table {
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}

table th {
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #999999;
  padding: 0px 5px;
}

table td {
  border: 1px solid #999999;
  padding: 5px 5px;
}

.conSubtabla {
  padding: 0;
  border-width: 0 1px;
}

.conSubtabla table {
  margin: 0;
  width: 100%;
  height: 100%;
}
.conSubtabla table td {
  border-width: 1px 0;
}
.conSubtabla table tr:first-child td {
  border-width: 0 0 1px;
}
.conSubtabla table tr:last-child td {
  border-width: 1px 0 0;
}
<table class='tbl'>
  <thead>
    <tr>
      <th>Licitación</th>
      <th>Nombre Licitación</th>
      <th>Fecha Inicio</th>
      <th>Fecha Término</th>
      <th>Monto Tope</th>
      <th>Monto Ejecutado</th>
      <th>Estado Licitación</th>
      <th>Consumo</th>
      <th>Detalle</th>
      <th>Administrar</th>
    </tr>
  </thead>
  <tbody>
    <tr class='FilaPrincipal' rowspan='3'>
      <td>texto</td>
      <td>texto</td>
      <td class="conSubtabla">
        <table>
          <tr>
            <td>Texto</td>
          </tr>
          <tr>
            <td>Texto</td>
          </tr>
          <tr>
            <td>Texto</td>
          </tr>
        </table>
      </td>
      <td class="conSubtabla">
        <table>
          <tr>
            <td>Texto</td>
          </tr>
          <tr>
            <td>Texto</td>
          </tr>
          <tr>
            <td>Texto</td>
          </tr>
        </table>
      </td>
      <td class="conSubtabla">
        <table>
          <tr>
            <td>Texto</td>
          </tr>
          <tr>
            <td>Texto</td>
          </tr>
          <tr>
            <td>Texto</td>
          </tr>
        </table>
      </td>
      <td class="conSubtabla">
        <table>
          <tr>
            <td>Texto</td>
          </tr>
          <tr>
            <td>Texto</td>
          </tr>
          <tr>
            <td>Texto</td>
          </tr>
        </table>
      </td>
      <td class="conSubtabla">
        <table>
          <tr>
            <td>Texto</td>
          </tr>
          <tr>
            <td>Texto</td>
          </tr>
          <tr>
            <td>Texto</td>
          </tr>
        </table>
      </td>
      <td>texto</td>
      <td>texto</td>
      <td>texto</td>
    </tr>
    <tr class='FilaPrincipal'>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
      <td>texto 2</td>
    </tr>
  </tbody>
</table>

Nota: Esta solución no sirve cuando el alto de una celda es mayor al de las celdas "hermanas".

1
  • Muchas gracias, había intentado algo similar, pero era insertando la subtabla con todas las filas en la celda y esta no cuadraba con el header jajaja. el 20 may. 2022 a las 17:28
0

Espero que esto pueda ser de ayuda

introducir el código aquí
<TABLE BORDER="1">
  <TR>
    <TH >
        Columna 1
    </TH>
    <TH >
        Columna 2
    </TH>
  </TR>
  <TR>
      <TD ROWSPAN="2">
        celda con dos filas
      </TD>
      <TD>
        celda de una fila 1
      </TD>
  </TR>
  <TR>
      <TD>
        celda de una fila 2
      </TD>
  </TR>
  <TR>
      <TD>
        celda de una fila 3
      </TD>
      <TD>
        celda de una fila 4
      </TD>
  </TR>
</TABLE>
2
  • Pulsa en editar y explica brevemente el funcionamiento del código. Lee Cómo responder.
    – padaleiana
    el 20 may. 2022 a las 14:56
  • hola, aquí llegamos al mismo punto en el que me encuentro jaja el 20 may. 2022 a las 17:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.