Versão atual:

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 -->

Versão (1):

Ver a versão formatada

Modos de usar tabela

Comentário

new question