不同行中不同宽度的表格单元格答案

【问题标题】：Table Cells with different widths in different rows不同行中不同宽度的表格单元格
【发布时间】：2014-01-09 07:13:09
【问题描述】：

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

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

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

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

【问题讨论】：

你想要这样吗？ jsfiddle.net/cR2qd/4
colspan 到底是干什么用的？ colspan就是让一个字段匹配上排x个字段的长度，你确定你理解了它的正确用法吗？
@Beginner Im sorry, I didnt 把我的问题说清楚了，我的问题不是表格的边框样式，而是单元格的宽度，似乎单元格的宽度不稳定。
@Steini 我不知道匹配需要的表，所以我尝试了 colspan，没有必要。
-1 用于内联 CSS 样式。使用样式表。

标签： html css

【解决方案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;
}

【讨论】：

【解决方案2】：

在表中使用表..

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

这样你就不会遇到这个问题了……

【讨论】：

【解决方案3】：

为此，您需要至少有一行定义单个单元格的宽度（未使用cellspans 的单元格）：

http://jsfiddle.net/cR2qd/7/1

HTML：

<body>
<table border="1">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <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>
</body>

CSS：

td {
    width: 25px;
}

【讨论】：

是的，我需要的两行显示正确，但是如何处理代码中的第一行？因为我不能让客户在顶部看到一个空行，所以我尝试在第一行添加样式“显示：无”，它返回...