ダイナミックテッドとtbodyの整列 - .Net MVC

Question

私はJavaScriptを使って生成されたテーブルを整列しようとしていますが、

注：私は既にtext-align：centerでディスプレイブロックを使用しようとしていますが、すでにディスプレイのtheader-goupも使用しようとしています。align-text：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); 
      } 
     }; 

Answer 1

その後、私は次何をする必要があるか、そして、divの幅と余白例えば

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