Alignment of table headers demo

by audetwebdesign

HTML

<table class="local table-fill" border=0 cellspacing=0>
    <thead>
        <tr>
            <th class="text-left"> Americas Center</th>
            <th class="text-left"> Asheville</th>
            <th class="text-left"> Austin</th>
            <th class="text-left"> Buffalo Grove</th>
            <th class="text-left"> Charlotte</th>
            <th class="text-left"> Columbia</th>
            <th class="text-left"> Coopersville</th>
        </tr>
        <tr>
            <th class="text-left"> XX%</th>
            <th class="text-left"> XX%</th>
            <th class="text-left"> XX%</th>
            <th class="text-left"> XX%</th>
            <th class="text-left"> XX%</th>
            <th class="text-left"> XX%</th>
            <th class="text-left"> XX%</th>
        </tr>
        <tr>
            <th class="text-left"> <div><strong>Eligible:</strong> XXXX</th>
            <th class="text-left"> <div><strong>Eligible:</strong> XXXX</th>
            <th class="text-left"> <div><strong>Eligible:</strong> XXXX</th>
            <th class="text-left"> <div><strong>Eligible:</strong> XXXX</th>
            <th class="text-left"> <div><strong>Eligible:</strong> XXXX</th>
            <th class="text-left"> <div><strong>Eligible:</strong> XXXX</th>
            <th class="text-left"> <div><strong>Eligible:</strong> XXXX</th>
        </tr>
        <tr>
            <th class="text-left"> <div><strong>Registered:</strong> XXXX</th>
            <th class="text-left"> <div><strong>Registered:</strong> XXXX</th>
            <th class="text-left"> <div><strong>Registered:</strong> XXXX</th>
            <th class="text-left"> <div><strong>Registered:</strong> XXXX</th>
            <th class="text-left"> <div><strong>Registered:</strong> XXXX</th>
            <th class="text-left"> <div><strong>Registered:</strong> XXXX</th>
            <th class="text-left"> <div><strong>Registered:</strong> XXXX</th>
        </tr>
 
    </thead>
    <tbody class="table-hover">
        <tr>
  ...

CSS

.table-fill {
    background: white;
    height: 320px;
    margin: auto;
    padding:5px;
    width: 100%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
}
table.local th {
    color:#FFF;
    background:#9ea7af;
    border-right: 1px solid #787E89;
    font-size:17px;
    font-weight: 100;
    padding:18px;
    text-align:left;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    vertical-align:top;
}
table.local th div {
    white-space: nowrap;
    font-weight: normal;
    color: red; /* for demo */
}
table.local th div strong {
    white-space: nowrap;
    color: blue; /* for demo */
}
table.local th:first-child {
    border-top-left-radius:0px;
}
table.local th:last-child {
    border-top-right-radius:0px;
    border-right:none;
}
table.local tr {
    color:#666B85;
    font-size:16px;
    font-weight:normal;
    text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
/*tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}*/
 table.local tr:first-child {
    border-top:none;
}
table.local tr:last-child {
    border-bottom:none;
}
table.local tr:nth-child(odd) td {
    background:#EBEBEB;
}
/*tr:nth-child(odd):hover td {
  background:#4E5066;
}*/
 table.local tr:last-child td:first-child {
    border-bottom-left-radius:0px;
}
table.local tr:last-child td:last-child {
    border-bottom-right-radius:0px;
}
table.local td {
    background:#FFFFFF;
    padding:15px;
    text-align:left;
    vertical-align:middle;
    font-weight:300;
    font-size:15px;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
    border-right: 1px solid #C1C3D1;
}
table.local tbody.table-hover td {
    border-top: 1px dashed blue;
}
table.local tbody.table-hover tr:last-child td {
    border-bottom: 1px dashed blue;
}
table.local td:last-child {
    border-right: 0px;
}
table.local th.text-left {
    text-align: left;
}
table.local th.text-center {
    text-align: center;
}
table.local...