Jquery DataTable not centered

Question

I'm starting to learn how to use dataTables and I used it to show some JSON data that I imported from an Excel file I have the table showing but it is not centered with the headings. I have been looking for a solution for a long time but I haven't found one yet. Code is enclosed in a snippet, and a screenshot of the output. Please help me if I am doing something wrong.

Thanks!! :)

/* set up XMLHttpRequest */

var url = "LICENCIAMENTOS.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";

oReq.send();
oReq.onload = function(e) {
  var arraybuffer = oReq.response;

  /* convert data to binary string */
  var data = new Uint8Array(arraybuffer);
  var arr = new Array();
  for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
  var bstr = arr.join("");

  /* Call XLSX */
  var workbook = XLSX.read(bstr, {
    type: "binary"
  });

  /* DO SOMETHING WITH workbook HERE */

  var first_sheet_name = workbook.SheetNames[5];
  //var address_of_cell='A5';

  /* Get worksheet */

  var worksheet = workbook.Sheets[first_sheet_name];
  v = XLSX.utils.sheet_to_json(worksheet);

  //DataTable       
  $('#data-table').DataTable({
    "aaData": v,
    "aoColumns": [{
        "mData": "Cenas",
        sDefaultContent: ''
      },
      {
        "mDataProp": "PT",
        sDefaultContent: ''
      },
      {
        "mDataProp": "kV",
        sDefaultContent: ''
      },
      {
        "mDataProp": "S/A",
        sDefaultContent: ''
      },
      {
        "mDataProp": "NOME",
        sDefaultContent: ''
      },
      {
        "mDataProp": "SGD",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Comprimento (m)",
        sDefaultContent: ''
      },
      {
        "mDataProp": "EDIS",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Licenciamento Externo",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Data Execucao",
        sDefaultContent: ''
      },
      {
        "mDataProp": "APE",
        sDefaultContent: ''
      },
      {
        "mDataProp": "DREC/DRELVT",
        sDefaultContent: ''
      },
      {
        "mDataProp": "A-P-E-",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Editos - GBCI",
        sDefaultContent: ''
      },
      {
        "mDataProp": "GBCI-Recortes",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Editos - ME",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Estradas",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Refer",
        sDefaultContent: ''
      },
      {
        "mDataProp": "ICN",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Txas-NI",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Taxas-Pag.",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Licenciamento",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Pedido de Vistoria",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Licenca de Exploracao",
        sDefaultContent: ''
      },
      {
        "mDataProp": "DRE  161.10.03.----",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Avisos",
        sDefaultContent: ''
      },
      {
        "mDataProp": "Observacoes",
        sDefaultContent: ''
      },
      {
        "mDataProp": "IF",
        sDefaultContent: ''
      },
      {
        "mDataProp": "SGD",
        sDefaultContent: ''
      },
      {
        "mDataProp": "DTA PGT",
        sDefaultContent: ''
      }
    ]
  });
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.8/xlsx.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>


  <div class="container">
    <h1 align="center">LICENCIAMENTOS</h3>
      <h3 align="center">Ansiao</h3>
      <table id="data-table" style="text-align:center;">
        <thead>
          <tr>
            <th>X</th>
            <th>PT</th>
            <th>kV</th>
            <th>S/A</th>
            <th>NOME</th>
            <th>SGD</th>
            <th>Comprimento</th>
            <th>EDIS</th>
            <th>Licenciamento externo</th>
            <th>Data Execucao</th>
            <th>APE</th>
            <th>DREC/DRELVT</th>
            <th>A-P-E-</th>
            <th>Editos</th>
            <th>GBCI-Recortes</th>
            <th>Editos-ME</th>
            <th>Estradas</th>
            <th>Refer</th>
            <th>ICN</th>
            <th>Txas-NI</th>
            <th>Taxas-Pag.</th>
            <th>Licenciamento</th>
            <th>Pedido de vistoria</th>
            <th>Licença de exploracao</th>
            <th>DRE 161.10.03----</th>
            <th>Avisos</th>
            <th>Obeservacoes</th>
            <th>if</th>
            <th>SGD</th>
            <th>DTA PGT</th>

          </tr>
        </thead>
      </table>

  </div>

Puroto · Accepted Answer · 2017-07-20T17:45:24.640

1

add margin: 0 auto; to your table style

<table id="data-table" style="text-align:center; margin: 0 auto;" >

it will automatically adjust the horizontal margins so your table will be centered

edited Jul 20 '17 at 17:45

answered Jul 20 '17 at 17:37

Puroto

153
1
3
16

I have the same issue but mine isn't working even after adding the style. Any idea? – xjshiya Sep 01 '20 at 12:50

Jquery DataTable not centered

1 Answers1