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

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

JSFIDLE中的代码是

注意：可以添加任何样式，但不能更改表的结构

我的问题不是表格的边框样式，而是单元格的宽度，看起来单元格的宽度不稳定，我希望第二行第一个单元格的右边框可以达到第一行第一个单元格的下边框中间，第一行第一个单元格的右边框可以到达第二行第二个单元格上边框的中间，其他单元格也可以

---

我已经尽了最大的努力，但仍然不起作用。我该怎么做才能符合要求？如有任何建议，将不胜感激。提前感谢。

在表格中使用表格

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

---

这样，您就不会有这个问题了……

要使其正常工作，您需要至少有一行定义单个单元格（未使用

单元格span

s的单元格）的宽度：

HTML:

您可以使用

元素来实现这一点：

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

---

你想要这样吗？这玩意儿到底是干什么用的？colspan是使一个字段的长度与上面一行x字段的长度相匹配，你确定你理解它的正确用法吗？@初学者I

m对不起，我没有明确提到我的问题，我的问题不是表格的边框样式，而是单元格的宽度，似乎单元格的宽度不稳定。@Steini我不知道如何匹配所需的表，所以我尝试了colspan，这是没有必要的。-1用于内联CSS样式。使用样式表。是的，我需要的两行显示正确，但如何处理代码中的第一行？因为我不能让客户看到顶部的空行，所以我尝试将样式“display:none”添加到第一行，它返回。。。
td {
    width: 25px;
}

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

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