表的行中不同数量的列

Question

是否有可能在每一行中创建一个具有不同数量单元格的表格,并且具有相同的宽度和高度.如果是这样,如何以更简单的方式完成.. ???

注意:

1. 行宽和高度相同

2. 单元格宽度在每一行都不同

   <table>
   <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
   </tr>
   <tr>
       <td colspan="2">&nbsp;</td>
       <td>&nbsp;</td>
   </tr>
   <tr>
       <td colspan="3">&nbsp;</td>
   </tr>
   

   这就是我尝试使用coll span ..这就是说第一行单元格宽度是30px,30px,30px.如果我使用coll span,它将像60px,30px但我希望它为50px,40px只有2个单元格

我想要这样

Answer 1

您可以使用colspan创建跨多个列的单元格.

的jsfiddle

<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="3">&nbsp;</td>
    </tr>
</table>

如果你想要所有的宽度和高度相同,但只有不同的单元格数量,你可以不设置特定的单元格<table>.

的jsfiddle

<table>
    <tr>
        <td class="content">&nbsp;</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td></td>
    </tr>
    <tr>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
    </tr>
</table>

更新

您对图像的更新,是的,您可以使用colspan以下方法完成此操作:

的jsfiddle

<table>
    <tr>
        <td>&nbsp;</td>
        <td colspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
        <td colspan="2">&nbsp;</td>
    </tr>
</table>

这使用了四列,中间两列比其他列小,这是一个图像,说明了如何设置列:

更新#2

以下是更随机尺寸单元格的示例.第一排10%,90%和第二排55%,45%.

的jsfiddle

HTML

<table>
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
</table>

CSS

table {
    width:100px;
}
td {
    border: 1px solid #000;
    height:1em;
}
tr:first-child td:first-child {
    width:10%;
}
tr:first-child td:last-child {
    width:90%;
}
tr:last-child td:first-child {
    width:55%;
}
tr:last-child td:last-child {
    width:45%;
}