I can't get text to center in my TDs that have a colspan greater than 1, I've added text-align center to every single tag and nothing. 

HTML: ( I removed all but one of the items that wouldn't center I've left all the tags that are relevant to this text )

```css
div.OBJ {
  display: table-cell;
  text-align: center;
}
div.scroll {
  width: 100%;
  height: 600px;
  overflow-y: scroll;
  overflow-x: auto;
  text-align: center;
}
td {
  text-align: center;
}
table {
  border-collapse: collapse;
  table-layout: fixed;
  align: center;
  text-align: center;
}
a:link {
  color: #000000;
  text-decoration: none;
  text-align: center;
}
a:visited {
  color: #000000;
  text-decoration: none;
  text-align: center;
}
a:hover {
  color: #ff0000;
  text-decoration: underline;
  text-align: center;
}
div {
  text-align: center;
}
span {
  text-align: center;
}
```

```html
<div class="scroll">
  <table border="1" style="width:100%">
    <tr id="{{ParentObject.id}}">
      <td id="{{ParentObject.id}}" colspan="{{object.size}}" style="background-color:{{object.bgColor}}" data-begin="{{object.begin}}" data-end="{{object.end}}">
        {% multiply object.size colWidth as colSize %}
        <div id="{{object.id}}" class="OBJ" style="width:{{colSize}}%">
          <a id="{{object.id}}" href="link" title="hover text">
            <span id="{{object.id}}" class="object">
                            {{object.name}}
                        </span>
          </a>
        </div>
      </td>
    </tr>
  </table>
</div>
```