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?

Capturar.PNG

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,

compartilhar
  1. 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.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. 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.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

3 respostas

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.