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