表的行中不同数量的列

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>
   

   This是我尝试过使用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%;
}

Answer 2

是的，您可以使用表格单元格的colspan属性，如下所示：

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>

    <tr>
        <td>1</td>
        <td colspan="2">2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>

     <tr>
        <td>1</td>
        <td colspan="5">2</td>
    </tr>

    <tr>
        <td colspan="2">1</td>
        <td>2</td>
        <td colspan="2">3</td>
        <td>4</td>
    </tr>
</table>

工作示例：http://jsfiddle.net/sk5cB/

Answer 3

不是肯定的，这是您正在寻找的内容，但您可以使用colspan代码中的<td>属性创建包含合并单元格的表格。

HTML colspan Attribute

Answer 4

您也可以在

中使用和创建表格

    <tr> </tr> tags

Answer 5

如果您打算在这些单元格中插入内容并且更喜欢保持相同的单元格宽度，那么仅使用表格是不可能的。我也在寻找这个问题的解决方案，当像他的示例中提供的Daniel Imms一样，当单元格为空时它看起来很棒，但是如果你向这些单元格添加内容，它们的宽度开始变大，行上的其他单元格开始变得越来越大小。指定table-layout：fixed没有帮助，因为第一行成为所有后续行的规则。

如果你有可能使用具有浮动左边和宽度百分比的div和一个清晰的修复显示：表格div将它们全部包装起来，就像Bootstrap 3在它的网格系统中那样，那么这将更加可靠。