如何添加colspan如果我正在制作一个垂直显示的表

Question

抱歉我的英语不好。我对colspan没什么问题

tr标签的默认显示是表格行，但在我的表格中，除了th之外的项目应为

垂直显示。所以我添加了display：inline-block to tr，其中包含

td并显示：阻止到td。

现在，将colspan添加到td不起作用。什么都没有改变

这是我的jsfiddle： https://jsfiddle.net/ffa7h0ub/1/

无法访问链接的代码

            <section id="Groups">

            <table>
                <tr>
                    <th class="hidden"></th>
                    <th id="DiagonalLine"><span> Teams </span><span>Results</span></th>
                    <th>W</th>
                    <th>D</th>
                    <th>L</th>
                    <th>GF</th>
                    <th>GA</th>
                    <th>P</th>
                </tr>
                <tr>
                    <td class="groups groupA">Group A</td>
                    <td class="groups groupB">Group B</td>
                    <td class="groups groupC">Group C</td>
                    <td class="groups groupD">Group D</td>
                    <td class="groups groupE">Group E</td>
                    <td class="groups groupF">Group F</td>
                    <td class="groups groupG">Group G</td>
                    <td class="groups groupH">Group H</td>
                </tr>
                <tr>
                    <td colspan="2">Russia</td>
                    <td colspan="2">Saudi Arabia</td>
                    <td colspan="2">Egypt</td>
                    <td colspan="2">Uruguay</td>
                </tr>
                <tr>
                    <td>Portugal</td>
                    <td>Spain</td>
                    <td>Morocco</td>
                    <td>Iran</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
            </table>

        </section>

CSS：

section#Groups tr:not(:first-child){
  display:inline-block;
  vertical-align:top;
}
section#Groups td{
  display:block;
}
 section#Groups th.hidden{
  width:40px;
}
section#Groups th{
 display:inline-block;
}

尝试更改显示：阻止显示：表格但不起作用。