Estilo tabela pai e filho

Pessoal,

Alguém tem alguma dica de como melhorar a aparência dessa tabela pai e filho? Como cada filho tem muitos campos a aparência dos checkbox e dos botõs de anexo não ficou boa. Teria alguma forma de quebrar em duas linhas ou alinhar os checkbox e colocar um botão abaixo do outros?

Meu código está da seguinte forma:

<div class="row">
                                            <table tablename="tabelaCotacoes" class="table" noaddbutton=false id="tabelaCotacoes">
                                                <thead>
                                                    <tr>
                                                        <td align="center"><b>Selecionar</b></td>
                                                        <td align="center"><b>Fornecedor</b></td>
                                                        <td align="center"><b>CNPJ</b></td>
                                                        <td align="center"><b>Produto/Serviço</b></td>
                                                        <td align="center"><b>Valor (R$)</b></td>
                                                        <td align="center"><b>Valor total (R$)</b></td>
                                                        <td align="center"><b>Critério para escolha</b></td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td style="vertical-align:up;"><input class="form-field" type="checkbox" name="selecionar" id="dataDespesa" style="width:20px;height:20px;"></td>
                                                        <td style="vertical-align:up;"><input class="form-control" type="text" name="fornecedor" id="fornecedor" ></td>
                                                        <td style="vertical-align:up;"><input class="form-control" type="text" name="cnpj" id="cnpj" mask="00.000.000/0000-00"></td>
                                                        <td style="vertical-align:up;"><input class="form-control" type="text" name="produto" id="produto"></td>
                                                        <td style="vertical-align:up;"><input class="form-control valor" type="text" name="valor" id="valor"  mask="#00.000.000.000.000,00"></td>
                                                        <td style="vertical-align:up;"><input class="form-control valor" type="text" name="valorTotal" id="valorTotal"  mask="#00.000.000.000.000,00"></td>        
                                                        <td style="vertical-align:up;"> <input class="form-field" type="checkbox" name="preco" id="preco" style="width:20px;height:20px;"><label> Menor Preço</label><br>
                                                                                        <input class="form-field" type="checkbox" name="qualidade" id="qualidade" style="width:20px;height:20px;"><label> Melhor qualidade</label><br>
                                                                                        <input class="form-field" type="checkbox" name="prazo" id="prazo" style="width:20px;height:20px;"><label> Melhor prazo de entrega</label><br>
                                                                                        <input class="form-field" type="checkbox" name="flexibilidade" id="flexibilidade" style="width:20px;height:20px;"><label> Flexibilidade nas negociações</label></td>
                                                        <td style="vertical-align:up;" align="center"><button type="button" class="btn btn-primary" name="anexoComprovante" id="anexoComprovante" onclick="showCamera(this.id);"><span class="fluigicon fluigicon-paperclip fluigicon-xs"></span> Anexar<br>Cotação  <button type="button" class="btn btn-primary" name="anexoContrato" id="anexoContrato" onclick="showCamera(this.id);"><span class="fluigicon fluigicon-paperclip fluigicon-xs"></span> Anexar<br>Contrato</td>
                                                        <td style="vertical-align:up;" align="center"></td>                                                
                                                    </tr>
                                                </tbody>
                                            </table>                                            
                                        </div>

Após a solução encontrada o código ficou da seguinte forma:

                                        <div class="row">
                                            <table tablename="tabelaCotacoes" class="table" noaddbutton=false id="tabelaCotacoes">
                                                <thead>
                                                    <tr>
                                                        <th>
                                                            <div class="row">
                                                                <div class="form-group col-md-2 col-xs-4">
                                                                    Selecionar
                                                                </div>
                                                                <div class="form-group col-md-2 col-xs-4">
                                                                    Fornecedor
                                                                </div>
                                                                <div class="form-group col-md-2 col-xs-4">
                                                                    CNPJ
                                                                </div>
                                                                <div class="form-group col-md-2 col-xs-4">
                                                                    Produto/Serviço
                                                                </div>
                                                                <div class="form-group col-md-2 col-xs-4">
                                                                    Valor (R$)
                                                                </div>
                                                                <div class="form-group col-md-2 col-xs-4">
                                                                    Valor total (R$)
                                                                </div>
                                                            </div>
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td style="vertical-align:middle;">

                                                            <div class="row">
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">
                                                                    <input class="form-field" type="checkbox" name="selecionar" id="dataDespesa" style="width:20px;height:20px;">
                                                                </div>
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">
                                                                    <input class="form-control" type="text" name="fornecedor" id="fornecedor" >
                                                                </div>
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">
                                                                    <input class="form-control" type="text" name="cnpj" id="cnpj" mask="00.000.000/0000-00">
                                                                </div>
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">
                                                                    <input class="form-control" type="text" name="produto" id="produto">
                                                                </div>
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">
                                                                    <input class="form-control valor" type="text" name="valor" id="valor"  mask="#00.000.000.000.000,00">
                                                                </div>
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">
                                                                    <input class="form-control valor" type="text" name="valorTotal" id="valorTotal"  mask="#00.000.000.000.000,00">
                                                                </div>
                                                            </div>

                                                            <div class="row">
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">,
                                                                </div>
                                                                <div class="form-group col-xs-8 col-sm-8 col-md-4 col-lg-4">
                                                                    <label>Critérios para escolha:</label><br>
                                                                    <input class="form-field" type="checkbox" name="preco" id="preco" style="width:20px;height:20px;"><label style="vertical-align: middle;">Menor Preço</label><br>
                                                                    <input class="form-field" type="checkbox" name="qualidade" id="qualidade" style="width:20px;height:20px;"><label style="vertical-align: middle;">Melhor qualidade</label><br>
                                                                    <input class="form-field" type="checkbox" name="prazo" id="prazo" style="width:20px;height:20px;"><label style="vertical-align: baseline;">Melhor prazo de entrega</label><br>
                                                                    <input class="form-field" type="checkbox" name="flexibilidade" id="flexibilidade" style="width:20px;height:20px;"><label style="vertical-align: baseline;">Flexibilidade nas negociações</label>
                                                                </div>
                                                                <div class="form-group col-xs-8 col-sm-8 col-md-4 col-lg-4" style="vertical-align: middle;">
                                                                    <div class="row">
                                                                        <button type="button" class="btn btn-primary" name="anexoComprovante" id="anexoComprovante" onclick="showCamera(this.id);"><span class="fluigicon fluigicon-paperclip fluigicon-xs"></span> Anexar Cotação  </button>
                                                                    </div>
                                                                    <br>
                                                                    <div class="row">
                                                                        <button type="button" class="btn btn-primary" name="anexoContrato" id="anexoContrato" onclick="showCamera(this.id);"><span class="fluigicon fluigicon-paperclip fluigicon-xs"></span> Anexar Contrato </button>
                                                                    </div> 
                                                                </div>
                                                            </div>
                                                        </td>                                                
                                                    </tr>
                                                </tbody>
                                            </table>                                            
                                        </div>

Agradeço a atenção,

criado 02 de Oct de 2017
Pedro Costa
199 pontos
editado 03 de Oct de 2017

Anexos

Capturar.PNG

Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

3 respostas

@Pedro,

Você pode criar somente 1 <td></td> e estruturar dentro dele os campos.

Segue um exemplo:

<div class="row">
    <table tablename="tabelaCotacoes" class="table" noaddbutton=false id="tabelaCotacoes">
        <thead>
            <tr>
                <th>
                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            Selecionar
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            Fornecedor
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            CNPJ
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            Produto/Serviço
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            Valor (R$)
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            Valor total (R$)
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            Critério para escolha
                        </div>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="vertical-align:up;">

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            <input class="form-field" type="checkbox" name="selecionar" id="dataDespesa" style="width:20px;height:20px;">
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            <input class="form-control" type="text" name="fornecedor" id="fornecedor" >
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            <input class="form-control" type="text" name="cnpj" id="cnpj" mask="00.000.000/0000-00">
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            <input class="form-control" type="text" name="produto" id="produto">
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            <input class="form-control valor" type="text" name="valor" id="valor"  mask="#00.000.000.000.000,00">
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            <input class="form-control valor" type="text" name="valorTotal" id="valorTotal"  mask="#00.000.000.000.000,00">
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            <input class="form-field" type="checkbox" name="preco" id="preco" style="width:20px;height:20px;"><label> Menor Preço</label><br>
                            <input class="form-field" type="checkbox" name="qualidade" id="qualidade" style="width:20px;height:20px;"><label> Melhor qualidade</label><br>
                            <input class="form-field" type="checkbox" name="prazo" id="prazo" style="width:20px;height:20px;"><label> Melhor prazo de entrega</label><br>
                            <input class="form-field" type="checkbox" name="flexibilidade" id="flexibilidade" style="width:20px;height:20px;"><label> Flexibilidade nas negociações</label>
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            <button type="button" class="btn btn-primary" name="anexoComprovante" id="anexoComprovante" onclick="showCamera(this.id);"><span class="fluigicon fluigicon-paperclip fluigicon-xs"></span> Anexar<br>Cotação  <button type="button" class="btn btn-primary" name="anexoContrato" id="anexoContrato" onclick="showCamera(this.id);"><span class="fluigicon fluigicon-paperclip fluigicon-xs"></span> Anexar<br>Contrato
                        </div>
                    </div>

                </td>                                                
            </tr>
        </tbody>
    </table>                                            
</div>

editar
- x
grosseiro ou ofensivo pouco construtivo obsoleto outro...
Motivo

criado 03 de Oct de 2017
Gabriel Franco da Rocha Nascimento
6500 pontos
editado 03 de Oct de 2017

1

Obrigado @Gabriel. Fiz utilizando apenas uma td porém fiz algumas alterações para melhor organização da tabela.
— Pedro Costa 03 de Oct de 2017

up 0 down
Boa Noite Pedro,

Poderia postar o seu código fonte, para que possamos analisar a estrutura do seu código HTML e assim ajudá-lo de forma mais efetiva na solução que deseja.

Abraço.
- editar
- x
  
  grosseiro ou ofensivo pouco construtivo obsoleto outro...
  Motivo
- criado 03 de Oct de 2017
  Rodrigo Becker Moré
  229 pontos
- 0
  
  Adicionei o código @Rodrigo! Abraço,
  — Pedro Costa 03 de Oct de 2017
Adicionar comentário

Caracteres restantes: 600
Quero acompanhar este tópico via email.

Comentário
Utilize formatação mini-Markdown: [link](http://exemplo.com) _italico_ **negrito** `codigo`.
Comentarios devem ter, no maximo, 600 caracteres. Se achar necessario, utilize links em vez de copiar código ou ainda edite sua pergunta/resposta para colocar mais informações
up 0 down
Caro(a), Você pode usar botões de deletar personalizado com as classes do style guide btn btn-success, você pode criar funções personalizadas de adicionar linhas e contar linhas. e colocar seu botão de forma alinhada a direita da tabela para ficar esteticamente melhor.
```
<button id="delrow" onClick="deRow()" class="btn btn-class"><span class="classe dos icones do style guide></span></button>

//Deleta filhos da tabela
function delRow(Objeto){
            fnWdkRemoveChild(Objeto);
        }

function addLinhaTabela(tabela) {

            if($("#" + tabela + " tr").length <= 6) index=wdkAddChild(tabela); 
            document.getElementById('txtItemId___'+index).value = index ;

        }

        //Limita o tamanho do campo.
        function contaItens(tabela) {

            if($("#" + tabela + " tr").length == 6) {
                  FLUIGC.toast({
                        title: 'Mensagem: ',
                        message: 'Só é permitido a inclusão de 5 linhas',
                        type: 'warning'
                    });
            }
        }
```
- editar
- x
  
  grosseiro ou ofensivo pouco construtivo obsoleto outro...
  Motivo
- criado 03 de Oct de 2017
  FLUIG MAN
  933 pontos
- 0
  
  Bom dia @Italo, O meu problema maior não está no número de linhas. O problema é que eu preciso de muitas colunas na tabela e isso acaba prejudicando seu visual. Agradeço a atenção.
  — Pedro Costa 03 de Oct de 2017
- 0
  
  @Italo, tenho uma tabela com nome "itens", fiz a função function contaItens(itens) { if($("#" + itens + " tr").length == 2) { displaymodal("Só é permitido a inclusão de 2(dois) itens"); } } Porém não funcionou, está sempre me retornando indice 0
  — Quemuel Rodrigues 16 de May de 2018
- 0
  
  index=wdkAddChild(tabela); você tem que referenciar o indice da tabela pai x filho usando a função wdkAddchild
  — FLUIG MAN 16 de May de 2018
- 0
  
  Assim deu certo obg. Só outro dúvida, por exemplo se eu excluo a linha(2) e adiciono outra linha fica sendo a linha(3), porém só tenho duas linhas na tabela. Tenho como atualizar o index qndo excluo uma linha?
  — Quemuel Rodrigues 16 de May de 2018
- 0
  
  tem sim você precisa realizar um laço de repetição para renomear os índices com base nos itens atuais após remover, coloque essa ação na remoção.
  — FLUIG MAN 16 de May de 2018
- 0
  
  você tem um exemplo Ítalo?
  — Quemuel Rodrigues 16 de May de 2018
- 0
  
  Segue um exemplo de como voce pode fazer com o jquery
  
  var contador = 0; $( ".classeDaLinha" ).each(function() { $(this).find("#Laudo_ExameID").prop("name", "Laudo["+contador+"].ExameID"); $(this).find("#Laudo_TipoExameID").prop("name", "Laudo["+contador+"].TipoExameID"); $(this).find("#ListLaudo_Nome").prop("name", "ListLaudo["+contador+"].Nome"); contador++; });
  — FLUIG MAN 16 de May de 2018
Mostrar todos os 7 comentários>
Adicionar comentário

Caracteres restantes: 600
Quero acompanhar este tópico via email.

Comentário
Utilize formatação mini-Markdown: [link](http://exemplo.com) _italico_ **negrito** `codigo`.
Comentarios devem ter, no maximo, 600 caracteres. Se achar necessario, utilize links em vez de copiar código ou ainda edite sua pergunta/resposta para colocar mais informações

fluig forum

Estilo tabela pai e filho

Comentário

3 respostas

Comentário

Comentário

Comentário

Não é a resposta que estava procurando? Procure outras perguntas com as tags paifilho estilo tabela html ou faça a sua própria pergunta.