Aligning th text to center with margin auto does not apply

Question

I have following table and I am trying to center text of th.

<table id="tblProgressSUmmary" class="table table-hover table-striped table-bordered table-condensed responsive dataTable no-footer dtr-inline collapsed" role="grid" aria-describedby="tblProgressSUmmary_info" style="width: 2082px;">
    <thead>
        <tr role="row">
        <th class="sorting_asc" tabindex="0" aria-controls="tblProgressSUmmary" rowspan="1" colspan="1" style="width: 52px;" aria-sort="ascending" aria-label="Running Track: activate to sort column descending">Running Track</th>
        <th class="sorting" tabindex="0" aria-controls="tblProgressSUmmary" rowspan="1" colspan="1" style="width: 66px;" aria-label="Exc Type: activate to sort column ascending">Exc Type</th><th class="sorting" tabindex="0" aria-controls="tblProgressSUmmary" rowspan="1" colspan="1" style="width: 88px;" aria-label="Progress Quantity: activate to sort column ascending">Progress Quantity</th>
        <th class="sorting" tabindex="0" aria-controls="tblProgressSUmmary" rowspan="1" colspan="1" style="width: 88px;" aria-label="Avg Duration: activate to sort column ascending">Avg Duration</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
        <td valign="top" colspan="10" class="dataTables_empty">No data available in table</td>
        </tr>
    </tbody>
</table>

And the css:

#tblCIPSUmmary  > thead {
    font-size:11px;
    letter-spacing:1px;
    margin:auto;
}

tr {
    margin:auto;
}

Snippet:

@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans|Poppins|Roboto+Mono');
body {
  padding-top: 50px;
  padding-bottom: 20px;
}

.body-content {
  padding-left: 15px;
  padding-right: 15px;
}

.dl-horizontal dt {
  white-space: normal;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
  max-width: 280px;
}

@media screen and (min-width: 768px) {
  .jumbotron {
    margin-top: 20px;
  }
  .body-content {
    padding: 0;
  }
}

.dataTable {
  background: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  color: #676a6c;
  font-family: 'Roboto Mono', monospace;
}

body {
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;
}

#tblCIPSUmmary>thead {
  font-size: 11px;
  letter-spacing: 1px;
  margin: auto;
}

tr {
  margin: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<table id="tblProgressSUmmary" class="table table-hover table-striped table-bordered table-condensed responsive dataTable no-footer dtr-inline collapsed" role="grid" aria-describedby="tblProgressSUmmary_info" style="width: 2082px;">
  <thead>
    <tr role="row">
      <th class="sorting_asc" tabindex="0" aria-controls="tblProgressSUmmary" rowspan="1" colspan="1" style="width: 52px;" aria-sort="ascending" aria-label="Running Track: activate to sort column descending">Running Track</th>
      <th class="sorting" tabindex="0" aria-controls="tblProgressSUmmary" rowspan="1" colspan="1" style="width: 66px;" aria-label="Exc Type: activate to sort column ascending">Exc Type</th>
      <th class="sorting" tabindex="0" aria-controls="tblProgressSUmmary" rowspan="1" colspan="1" style="width: 88px;" aria-label="Progress Quantity: activate to sort column ascending">Progress Quantity</th>
      <th class="sorting" tabindex="0" aria-controls="tblProgressSUmmary" rowspan="1" colspan="1" style="width: 88px;" aria-label="Avg Duration: activate to sort column ascending">Avg Duration</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td valign="top" colspan="10" class="dataTables_empty">No data available in table</td>
    </tr>
  </tbody>
</table>

Answer 1

ADD text-center class of bootstrap on the th that you want to center

@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans|Poppins|Roboto+Mono');

body {
  padding-top: 50px;
  padding-bottom: 20px;
}

.body-content {
  padding-left: 15px;
  padding-right: 15px;
}

.dl-horizontal dt {
  white-space: normal;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
  max-width: 280px;
}

@media screen and (min-width: 768px) {
  .jumbotron {
    margin-top: 20px;
  }
  .body-content {
    padding: 0;
  }
}

.dataTable {
  background: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  color: #676a6c;
  font-family: 'Roboto Mono', monospace;
}

body {
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;
}

#tblCIPSUmmary>thead {
  font-size: 11px;
  letter-spacing: 1px;
  margin: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<table id="tblProgressSUmmary" class="table table-hover table-striped table-bordered table-condensed responsive dataTable no-footer dtr-inline collapsed" role="grid" aria-describedby="tblProgressSUmmary_info" style="width: 2082px;">
  <thead>
    <tr role="row">
      <th class="sorting_asc text-center" tabindex="0" aria-controls="tblProgressSUmmary" rowspan="1" colspan="1" style="width: 52px;" aria-sort="ascending" aria-label="Running Track: activate to sort column descending">Running Track</th>
      <th class="sorting text-center" tabindex="0" aria-controls="tblProgressSUmmary" rowspan="1" colspan="1" style="width: 66px;" aria-label="Exc Type: activate to sort column ascending">Exc Type</th>
      <th class="sorting text-center" tabindex="0" aria-controls="tblProgressSUmmary" rowspan="1" colspan="1" style="width: 88px;" aria-label="Progress Quantity: activate to sort column ascending">Progress Quantity</th>
      <th class="sorting text-center" tabindex="0" aria-controls="tblProgressSUmmary" rowspan="1" colspan="1" style="width: 88px;" aria-label="Avg Duration: activate to sort column ascending">Avg Duration</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td valign="top" colspan="10" class="dataTables_empty">No data available in table</td>
    </tr>
  </tbody>
</table>

Answer 2

just add following Css in your code

thead tr th{ text-align:center; }

Answer 3

Bootstrap has a predefined class name for center aligning the text, you can use "text-center" class so that your th elements will align to center.

.text-center{text-align:center;}