html - 对齐下面的部分内容

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