6

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

笔记:

  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 个单元格

我想要这样在此处输入图像描述

4

5 回答 5

21

您可以使用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%;
}
于 2013-03-27T11:59:26.383 回答
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/

于 2013-03-27T12:01:35.733 回答
0

您还可以在

    <tr> </tr> tags
于 2013-03-27T12:22:12.257 回答
0

不确定这是您要查找的内容,但您可以使用标签中的colspan属性创建包含合并单元格的表格。<td>

HTML colspan 属性

于 2013-03-27T12:02:00.577 回答
0

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

如果您有可能使用具有向左浮动和百分比宽度的 div 以及一个清晰的修复 display:table div 将它们全部包裹起来,就像 Bootstrap 3 在其网格系统中所做的那样,那么这将更加可靠。

于 2014-08-21T13:09:08.127 回答