对齐动态thead和tbody - .Net MVC

Question

我尝试对齐由javascript生成的表格，但我已经尝试了所有内容，但没有任何效果！

注意：我已经尝试使用text-align：center在thead上使用display block，已经尝试使用display theader-goup，align-text：center with the class for the the and 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);
            }
        };

Answer 1

将表放在div元素上，然后给div一个宽度和一个边距，例如

<div id="styleExample" style="width:920px; margin:auto">
    <table id="yourTable"...></table>
</div>