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,