对齐下方的部分内容

Question

如果你使用CSS，那么即使它们在另一个表行中，你也可以排列彼此相同类的所有内容吗？我希望所有VS在彼此之下对齐，然后是左右两侧的球队。

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

现在就像这样：

我希望它看起来像这样：

Answer 1

您可以将现在的TD分成三个独立的TD。

Answer 2

将此td拆分为3个不同的td并在相应的colspan="3"上使用th。

看一下 Working Fiddle

它只是一个基本布局，根据您的需要改变它。

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