<style type="text/css">

th, td {
  padding: 3px !important;
}

 table{
    margin-left: auto;
    margin-right: auto;
	margin-top: 50px;
}
/* Sortable tables */
table.sortable thead {
    background-color: #333;
    color: #cccccc;
    font-weight: bold;
    cursor: default;

}
th {
  font-size: 100%;
  padding: 6px;
}
td {
	  padding: 6px;
}

table.sortable tbody tr:nth-child(2n) td {
  background: #ddd;
}

table.sortable tbody tr:nth-child(2n+1) td {
  background: #fff;
}

table#counterdemo tbody {
    counter-reset: sortabletablescope;
}
table#counterdemo thead tr::before {
    content: "";
    display: table-cell;
}
table#counterdemo tbody tr::before {
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
    display: table-cell;
}

table#stripedemo tbody tr:nth-child(2n) td {
  background: #ffcccc;
}
table#stripedemo tbody tr:nth-child(2n+1) td {
  background: #ccffff;
}
table.sortable th::after, th.sorttable_sorted::after, th.sorttable_sorted_reverse::after {
  content: " ";
  display: inline-block;
  width: 24px;
  height: 24px;
}
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}
th.sorttable_sorted::after {
  background: url(my-sorted-icon.png);
  background-size: contain;
}
th.sorttable_sorted_reverse::after {
  background: url(my-sorted-reversed-icon.png);
  background-size: cover;
}
</style>