html - 不同行中具有不同宽度的表格单元格

Question

我的CSS很弱，我想在我的html页面中放一个表格，它是两行五列每行(当然是简化的)，它应该是这样的(表格是一个手绘表，不够精确，请见谅。):

但是我的看起来是这样的:

这是我的代码:

<table border="1">
    <tr>
        <td style="width:50px" colspan="2">&nbsp;</td>
        <td style="width:50px" colspan="2">&nbsp;</td>
        <td style="width:50px" colspan="2">&nbsp;</td>
        <td style="width:50px" colspan="2">&nbsp;</td>
        <td style="width:25px">&nbsp;</td>
    </tr>
    <tr>
        <td style="width:25px">&nbsp;</td>
        <td style="width:50px" colspan="2">&nbsp;</td>
        <td style="width:50px" colspan="2">&nbsp;</td>
        <td style="width:50px" colspan="2">&nbsp;</td>
        <td style="width:50px" colspan="2">&nbsp;</td>
    </tr>
</table>

jsfiddle 中的代码是 here .

注意:可以添加任意样式，但不能改变表格结构。

我的问题不是表格的边框样式，而是单元格的宽度，似乎单元格的宽度不稳定，我希望第二行第一个单元格的右边界能够到达底部边界的中间第一行第一个单元格，第一行第一个单元格的右边界可以到达第二行第二个单元格的上边界的中间，其他单元格也是如此。

我已经尽力了，还是不行。我该怎么做才能满足要求？任何建议将不胜感激。提前致谢。

Answer 1

您可以使用 <colgroup>实现这一点的元素:

<table border="1">
    <colgroup>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
    </colgroup>
    <tr>
        <td colspan="2">&nbsp;</td>
        <td colspan="2">&nbsp;</td>
        <td colspan="2">&nbsp;</td>
        <td colspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td colspan="2">&nbsp;</td>
        <td colspan="2">&nbsp;</td>
        <td colspan="2">&nbsp;</td>
        <td colspan="2">&nbsp;</td>
    </tr>
</table>

它会告诉表格有 9 列，每行将像您原来的那样跨越这些列。

---

还有其他非表格方法可以实现您的要求。这是一个简单的例子:

<div>
    <div class="row">
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
    </div>
    <div class="row">
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
    </div>
</div>

div.row
{
    clear:both;
}
div div div
{
    width: 50px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    display: inline-block;
    float: left;
    margin: -1px;
}

div div:nth-child(2n+1) div:first-child,
div div:nth-child(2n) div:last-child
{
    width: 25px;
}