不同行宽度不同的表单元格

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

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

我的问题不是表格的边框样式，而是单元格的宽度，它看起来单元格有不规则的宽度，我希望第二行中第一个单元格的右边框可以达到底部边框的中间位置第一行的第一个单元格的右边界，第一行的第一个单元格的右边界可以到达第二行的第二个单元格的上边界的中间，其他的也是如此。

我已经尽力了，但它仍然无法正常工作。我怎么能做到符合要求？任何建议将不胜感激。提前致谢。表内

来源

2014-01-08 Leo Zhao

你想这样吗？ http://jsfiddle.net/cR2qd/4/ – Karuppiah

什么是集体的？一个colspan是使一个字段匹配上面一行x字段的长度，你确定你理解它的正确用法吗？ – Steini

@Beginner我很抱歉，我没有清楚地提到我的问题，我的问题不是表格的边框样式，而是单元格的宽度，看起来单元格的宽度不稳定。 –

可以使用<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; 
}

来源

2014-01-08 06:56:23

它的作用就像一个魅力！非常感谢你！ –

使用表..

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

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

来源

2014-01-08 06:35:52 Marinus

对于这个工作，你需要有至少一个行定义的宽度个体的细胞（那些不使用cellspan S）：

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

来源

2014-01-08 06:42:50 Steve

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

不同行宽度不同的表单元格

回答

相关问题