我正在尝试对齐由javascript生成的表格,但是我已经尝试了所有方法,但没有任何效果!
注意:我已经尝试过在thead上使用text-align:center显示块,也已经尝试过在displaytheader-goup上使用display块,align-text:center与thead和th的类一起使用。但是仍然不起作用。
有人能帮我吗?
<div role="tabpanel" class="tab-pane" id="OrcamentoMaterial">
<div class="col-md-12">
<div class="page-header m-b-20" style="margin-top:-30px;">
<h2 class="m-b-10"><strong style="font-size:18px;">
<a style="color: red;">{{item.Codigo}} </a> - {{item.Descricao}}</strong></h2>
<div class="col-md-3">
<div class="fg-lin">
<label>Nome da pessoa que solicitou o orçamento</label>
<input id="txtPessoaSolicitouOrcamento" class="form-control fg-input" />
</div>
</div>
<div class="col-md-3" style="margin-top:-6px;">
<div class="fg-line">
<div class="select">
@Html.Label("Executor")
@Html.DropDownListFor(model => model.TecnicoId, Model.listaTecnicos, "Selecione", new { @id = "ddlPessoaExecutora", @style = "height:20px !important;", @class = "form-control " })
</div>
</div>
</div>
<div class="col-md-3">
<div class="fg-lin">
<label>Descrição</label>
<input id="txtDescricaoOrcamento" class="form-control fg-input" />
</div>
</div>
<div class="col-md-3">
<div class="fg-lin">
<label>Data orçamento</label>
<input type="datetime" id="txtDataOrcamento" class="form-control fg-input datepicker" />
</div>
</div>
</div>
<fieldset class="col-md-12 m-t-30 m-b-20">
<legend>ORÇAMENTO MATERIAL</legend>
<div class="row m-t-10">
<div class="form-group col-md-10 m-t-15">
<div class="fg-line">
<select id="selectMaterial" style="width:100%">
<text>
<option value="0" selected="selected"></option>
</text>
</select>
</div>
</div>
<div class="col-md-1 form-group fg-float m-t-10">
<div class="fg-line">
<label>Quantidade</label>
@Html.TextBoxFor(m => m.OrcamentoMaterial.QuantidadeMaterial, new { @class = "form-control fg-input", id = "txtMaterialQuantidade" })
</div>
@Html.ValidationMessageFor(o => o.Material.Nome, "", new { @class = "has-error text-danger" })
</div>
<div class="col-md-1">
<a href="#" id="btn-addOrcamentoMaterial" class="btn btn-success waves-effect espaco pull-right auto-size" style="float: right; margin-top: 15px;"><i class="zmdi zmdi-plus"></i></a>
</div>
</div>
<div class="row" style="font-size: smaller;">
</fieldset>
</div>
<table class="table table-striped" id="tableOrcamentoMaterial">
<thead align="center">
<tr>
<th>Material</th>
<th>Ni</th>
<th>Name</th>
<th>Qtd.</th>
<th>Value</th>
<th>Total</th>
</tr>
</thead>
<tbody class="tbFooterOrcamentoMaterial">
</tbody>
</table>
$("#btn-addOrcamentoMaterial").click(function ()
{
var solicitante = "";
var executor = "";
var descricaoOrcamento = "";
var TecnicoId = 0;
var dataOrcamento = "";
var material = "";
var qtdMaterial = "";
var valorTotal = 0;
var materialId = 0;
var codigoNi = "";
var codigoMaterial = "";
$("#ddlPessoaExecutora option:selected").val() != null ? TecnicoId = $("#ddlPessoaExecutora option:selected").val() : $("#ddlPessoaExecutora option:selected").val(0);
$("#txtPessoaSolicitouOrcamento").val() != null ? solicitante = $("#txtPessoaSolicitouOrcamento").val() : "Não informado";
$("#ddlPessoaExecutora option:selected").text() != "" ? executor = $("#ddlPessoaExecutora option:selected").text() : $("#ddlPessoaExecutora option:selected").val(1);
$("#txtDescricaoOrcamento").val() != null ? descricaoOrcamento = $("#txtDescricaoOrcamento").val() : "Não possui descrição";
$("#txtDataOrcamento").val() != null ? dataOrcamento = $("#txtDataOrcamento").val() : new Date();
$("#selectMaterial option:selected").text() != null ? material = $("#selectMaterial option:selected").text() : $("#selectMaterial option:selected").val(1);
$("#selectMaterial option:selected").val() != null ? materialId = $("#selectMaterial option:selected").val() : $("#selectMaterial option:selected").val(0);
$("#txtMaterialQuantidade").val() != null ? qtdMaterial = $("#txtMaterialQuantidade").val() : "0";
var qryMaterial = getMaterialbyId(materialId);
valor = qryMaterial.vlMaterial;
codigoNi = qryMaterial.CodigoNi;
codigoMaterial = qryMaterial.CodigoMaterial;
valorTotal = parseFloat(qtdMaterial) * valor;
var orcamentoExibir = codigoMaterial + "-" + codigoNi + "-" + material + "-" + qtdMaterial + "-" + valor + "-" + valorTotal;
orcamentoExibir = orcamentoExibir.split("-");
var orcamento = dataOrcamento + " - " + solicitante + " - " + executor + " - " + descricaoOrcamento + " - "+ codigoMaterial + "-" + codigoNi+ "-" + material + " - " + qtdMaterial + " - " + valor + " - " + valorTotal +" - " + TecnicoId +" - " + materialId;
incluirOrcamentoMaterial(orcamento, orcamentoExibir);
$("#ddlPessoaExecutora option:selected").val("");
$("#txtPessoaSolicitouOrcamento").val("");
$("#ddlPessoaExecutora option:selected").val(0);
$("#txtDescricaoOrcamento").val("");
$("#txtDataOrcamento").val("");
$("#selectMaterial option:selected").val(0);
$("#selectMaterial").text("");
$("#txtMaterialQuantidade").val("");
});
function incluirOrcamentoMaterial(orcamento, orcamentoExibir) {
listaOrcamentoMaterial.push(orcamento);
listaOrcamentoMaterialExibir.push(orcamentoExibir);
for (i = 0; i < listaOrcamentoMaterialExibir.length; i++) {
var tr = document.createElement('TR');
tr.class = 'rowOrcamentoMaterial';
i = listaOrcamentoMaterialExibir.length -1;
valorTotalOrcamento = valorTotalOrcamento + parseFloat(listaOrcamentoMaterialExibir[i][5]);
for (j = 0; j < listaOrcamentoMaterialExibir[i].length; j++) {
var td = document.createElement('TD');
td.appendChild(document.createTextNode(listaOrcamentoMaterialExibir[i][j]));
td.class = 'cellOrcamentoMaterial';
tr.appendChild(td)
}
$("#tableOrcamentoMaterial > tbody").append(tr);
}
$("#tableOrcamentoMaterial > tbody > tr").addClass("rowOrcamentoMaterial");
var tt = $(".rowOrcamentoMaterial").children.length;
debugger;
if(!$("#tableOrcamentoMaterial > tfoot .totalOrcamentoMaterial").html()){
$("#tableOrcamentoMaterial").append('<tfoot><tr><td colspan="5"></td><td class="totalOrcamentoMaterial orcamento" style="color:red;">'+ valorTotalOrcamento + '</td></tr></tfoot>');
} else
{
$("#tableOrcamentoMaterial > tfoot .totalOrcamentoMaterial").html(valorTotalOrcamento);
}
};
最佳答案
将表格放在div元素上,然后为div设置宽度和边距
<div id="styleExample" style="width:920px; margin:auto">
<table id="yourTable"...></table>
</div>