Question

我在CSS中很弱，而且我试图在我的html页面中放一个表，它每行有两行五列（当然它是简化的），它应该看起来像这样（表是一个手绘图表，它没有那么精确，我很抱歉。）：

enter image description here

但是我看起来像这样：

enter image description here

这是我的代码：

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

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

这样你永远不会有这个问题......

Answer 3

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

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

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

3 个答案: