Align part of content of <TD> belowe each other

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

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;
}

Answer 2

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