0

Gostaria de saber se é possível Adicionar uma Table HTML dentro de outra tabela em um foreach.

Explicação pra eu necessitar disso: Eu tenho os orçamentos no banco de dados e cada orçamento pode ter muitos itens de composição. Gostaria de listar os itens de composição de baixo dos seus respectivos orçamentos.

Estou tentando mas o layout está quebrando.

<table border="1">
  <thead>
    <tr>
      <th>Item</th>
      <th>Descricao</th>
      <th>Quantidade</th>
      <th>Valor unidade</th>
      <th>Valor total</th>
      <th>Cliente</th>
    </tr>
  </thead>
  <tbody>
    <?php $itemCount = 1 ?>
    <?php foreach ($orcamentos->findAll() as $orcamento) : ?>
      <tr>
        <td>Item <?= $itemCount ?></td>
        <td><?= $orcamento['descricao'] ?></td>
        <td><?= $orcamento['quantidade'] ?></td>
        <td><?= $orcamento['valor_unidade'] ?></td>
        <td><?= $orcamento['valor_total'] ?></td>
        <td><?= $clientes->where('id', $orcamento['cliente_id'])->first()['nome_cliente'] ?></td>

        <td>
          <table border="2">
            <thead>
              <tr>
                <th>Item</th>
                <th>Descricao</th>
                <th>Quantidade</th>
                <th>Valor unidade</th>
                <th>Valor total</th>
                <th>Fornecedor</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>A</td>
                <td>A</td>
                <td>A</td>
                <td>A</td>
                <td>A</td>
                <td>A</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <?php $itemCount += 1 ?>
    <?php endforeach; ?>
  </tbody>
</table>
6
  • 2
    sim é possível, mas do jeito que está no seu código, aninhar uma <table> dentro do <tbody> não, pode ser aninhada dentro de um <td>. Crie uma <td> e insira a table lá, use colspan se for preciso 6/05/2021 às 15:08
  • Ficou uma do lado da outra....@RicardoPontual 6/05/2021 às 15:19
  • pode colocar o código na pergunta? ai da pra entender melhor 6/05/2021 às 15:23
  • @RicardoPontual, Editei a pergunta com o código atualizado... 6/05/2021 às 15:24
  • 1
    ai vai ficar ao lado mesmo, ficaria melhor fazer numa linha abaixo, veja esse exemplo que montei, se quiser coloco numa resposta: jsfiddle.net/4hrcz01w/1 6/05/2021 às 15:28

1 Resposta 1

3

O elemento <table> pode ser inserido em outra tabela, dentro de um elemento <td>, assim poderia fazer algo assim:

<table border="1">
  <thead>
    <tr>
      <th>Item</th>
      <th>Descricao</th>
      <th>Quantidade</th>
      <th>Valor unidade</th>
      <th>Valor total</th>
      <th>Cliente</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        <td>Item 1</td>
        <td>descricao</td>
        <td>2</td>
        <td>10</td>
        <td>20</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>Outra tabela</td>
        <td colspan="5" style="background-color: yellow">
          <table border="1">
        <thead>
          <tr>
            <th>Item</th>
            <th>Descricao</th>
            <th>Quantidade</th>
            <th>Valor unidade</th>
            <th>Valor total</th>
            <th>Fornecedor</th>
          </tr>
          <tr>
            <td>Item 1</td>
            <td>descricao</td>
            <td>1</td>
            <td>10</td>
            <td>10</td>
            <td>Fulano</td>
          </tr>
        </thead>
      </table>
        </td>
      </tr>
  </tbody>
</table>

Note que, como a segunda tabela é inserida na estrutura da primeira, usei o colspan para fazer o merge das células e manter o alinhamento e estrutura

2
  • É possível criar uma ul dentro de uma table também? por incrível que pareça, surgiu a necessidade e acontece a mesma coisa, ela quebra 6/05/2021 às 16:58
  • 1
    sim, dentro da <td> pode :) 6/05/2021 às 16:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .