Align part of content of <TD> belowe each other - html

Question

I wounder if you with CSS can line a everything that has the same class below each other even if they are in another table row? I want all the VS to be aligned below each other and then the teams on left and right side of them.
<tr>
<td>Some info</td>
<td>Some info</td>
<td id="teams"> A team <span class="vs">VS</span> Another Team</td>
<td>Some Info</td>
</tr>
<tr>
<td>Some info</td>
<td>Sine info</td>
<td id="teams"> A team name <span class="vs">VS</span> Another Team name</td>
<td>Some Info</td>
</tr>
Now its like this:
And i want it to look like this:

Answer 1

You could split the TD you have now into three seperate TDs.

Answer 2

By splitting this td into 3 different td's and using colspan="3" on the coresponding th.
Take a look at that Working Fiddle
it's just a basic layout, alter it to your needs..
HTML:
<table border="1">
<tr>
<th>info 1</th>
<th>info 2</th>
<th colspan="3"> A team VS Another Team</th>
<th>info 3</th>
</tr>
<tr>
<td>Some info</td>
<td>Some info</td>
<td class="teams left">A team</td>
<td class="vs">VS</td>
<td class="teams right">Another Team</td>
<td>Some Info</td>
</tr>
<tr>
<td>Some info</td>
<td>Some info</td>
<td class="teams left">A team name</td>
<td class="vs">VS</td>
<td class="teams right">Another Team name</td>
<td>Some Info</td>
</tr>
</table>
CSS:
table
{
width: 100%;
}
td
{
text-align: center;
}
th:nth-child(3)
{
column-span: 3;
}
.teams
{
color: red;
}
.vs
{
color: green;
}
.left
{
text-align: right;
}
.right
{
text-align: left;
}
{
color: green;
}