Modos de usar tabela

Boa tarde, hoje utilizo um método que ao clicar em um botão uma tabela é criada, para o usuário imputar informações. Sendo assim cada vez que ele clica no botão é criado uma tabela. Porem quando a tabela tem muitos campos a serem preenchidos o visual dela fica ruim. Algum poderia me indicar uma melhor forma. modelo.jpg

<div class="panel panel-default" id="pn_qualidade">
                            <div class="panel-heading">
                                <h3 class="panel-title">Justificativa da qualidade</h3>
                            </div>
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered" tablename="tb_Defeitos" id="tb_Defeitos" deleteicon="/ecm_resources/resources/assets/images/delete_24_Original.png">
                                            <thead>
                                                <tr>
                                                    <th>Descricao do produto</th>
                                                    <th>Centro de custo destino</th>
                                                    <th>Prioridade</th>
                                                    <th>Tipo</th>
                                                    <th>Quantidade</th>
                                                    <th>Valor unitario</th>
                                                    <th>Justificativa</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="col-md-5"><input type="text" name="Tipo" id="Tipo" class="form-control"></td>        
                                                    <td><input type="text" name="Tipo" id="Tipo" class="form-control"></td>
                                                    <td><input type="text" name="Problema" id="Problema" class="form-control"></td>
                                                    <td><input type="text" name="Tipo" id="Tipo" class="form-control"></td>
                                                    <td><input type="text" rows="2 ame="Problema" id="Problema" class="form-control"></td>
                                                    <td><input type="text" name="Problema" id="Problema" class="form-control"></td>
                                                    <td class="col-md-10"><input type="text" name="Tipo" id="Tipo" class="form-control"></td> 
                                                </tr>
                                            </tbody>

                                        </table>
                                    </div>
                                </div>
                        </div>
<div class="panel panel-default" id="pn_painel01">            <!-- Inicio tag painel -->
                <div class="panel-heading">            <!-- Tag para abrir titulo do painel -->                                       
                    <h3 class="panel-title">Titulo</h3>            <!-- Tag titulo do painel -->         
                </div>            <!-- Tag final titulo do painel -->
                    <div class="panel-body">            <!-- Tag abertura de painel -->

                        <div class="col-md-3">                <!-- Tag abertura do campo e tamanho -->
                                    <label class="control-label">Centro de custo destino</label>            <!--  -->
                    <!--Inicio campo Zoom -->    <input            
                                                    type="zoom"
                                                    id = "ctt_custo"
                                                    name="ctt_custo"
                                                    data-zoom="{
                                                    'displayKey':'CTT_DESC01',
                                                    'datasetId':'dsCentroDeCusto',
                                                    'fields':[
                                                    {
                                                    'field':'CTT_CUSTO',
                                                    'label':'Codigo'
                                                    },{
                                                    'field':'CTT_DESC01',
                                                    'label':'Descricao',
                                                    'standard':'true',
                                                    'search':'true'
                                                    }
                                                    ]
                                                    }"
                                                />                <!-- Final campo Zoom que chama um DataSet pre configurado que consulta o banco -->
                        </div> <!-- Tag final de campo -->

                        <div class="col-md-4">             <!-- Tag inicio de campo -->
                            <label class="control-label">Prioridade</label>             <!-- Tag tamanho do campo e nome  -->
                                <select name="02" id="02" class="form-control">                <!-- Tag id interno do sistema -->        
                                    <option value="Prioridade_01">Baixa</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_02">Media</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_03">Alta</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_04">Emergencial</option>                <!-- Tag nome interno da selecao -->                                    
                                </select>            <!-- Tag final id interno do sistema -->
                        </div>                <!-- Tag final de campo -->

                        <div class="col-md-12">            <!-- Tag inicio de campo -->
                            <label class="control-label">Descricao do produto</label>            <!-- Tag tamanho do campo e nome  -->
                            <textarea id="descricao_do_produto" rows="1" name="descricao_do_produto" class="form-control" wrap="hard" placeholder="Detalhamento do produto"></textarea>    <!-- Tag classe texto  -->    
                        </div>            <!-- Tag final de campo -->

                        <div class="col-md-4">             <!-- Tag inicio de campo -->
                            <label class="control-label">Tipo</label>             <!-- Tag tamanho do campo e nome  -->
                                <select name="02" id="02" class="form-control">                <!-- Tag id interno do sistema -->        
                                    <option value="Prioridade_01">UN</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_02">PC</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_03">MI</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_04">LT</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_04">LA</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_04">BD</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_04">KG</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_04">TB</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_04">FR</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_04">JG</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_04">MT</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_04">BR</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_04">KT</option>                <!-- Tag nome interno da selecao -->
                                    <option value="Prioridade_04">CJ</option>                <!-- Tag nome interno da selecao -->
                                </select>            <!-- Tag final id interno do sistema -->
                        </div>                <!-- Tag final de campo -->

                        <div class="col-md-3">            <!-- Tag inicio de campo -->
                            <label for="control-label">Quantidade</label>            <!-- Tag nome do campo -->                        
                                <input type="int" name="quant_produto" class="form-control" id="quant_produto">            <!-- Tag id interno -->
                        </div>            <!-- Tag final de campo -->

                        <div class="col-md-3">            <!-- Tag inicio de campo -->
                            <label for="control-label">Valor unitario</label>            <!-- Tag nome do campo -->                            
                                <input type="int" name="valor_unitario" class="form-control" id="valor_unitario">            <!-- Tag id interno -->
                        </div>            <!-- Tag final de campo -->

                        <div class="col-md-12">    <!-- Tag inicio de campo -->
                            <label class="control-label">Justificativa</label>            <!-- Tag nome do campo --> 
                                <textarea id="justificativa" rows="2" name="justificativa" class="form-control" wrap="hard" placeholder="Detalhamento da justificativa"></textarea>    <!-- Tag classe texto  -->    
                        </div>    <!-- Tag final de campo -->        

                    </div>                <!-- Tag final de painel -->                    
            </div>             <!-- Fianl tag painel -->
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!

2 respostas

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