2

我正在尝试生成每行中包含不同数量单元格的表格。

  • 第一行是标题行（每隔一行包含单元格）。这个标题是表格的宽度。

  • 第二行有2个单元格......

  • 第三个有 1 个单元格...

  • 第四个有4个细胞......

  • 第五行也是最后一行有 3 个单元格。

我想要设置表格，以便行跨越表格的整个宽度。如果表格是 1000px...

  • 标题为 1000px 宽

  • 第二行的单元格将是 500px EACH

  • 第三行的单元格为 1000px

  • 第 4 行中的单元格将是 250px EACH

  • 第 5 行中的单元格分别为 333px、334px 和 333px（从左到右）

我发现我可以对前 4 行使用 colspan，但第 5 行（带有 3 个单元格）需要一个非整数值。如果没有我可以告诉的 colspan，第 5 行中的单元格不会扩展到它们的列之外......

  • 尝试宽度：## CSS 代码

  • 在每个单元格的 div 标签内

  • 在 td 标签内

  • 创建一个或多个定义单元格宽度的类

  • 标识每个单元格，带或不带 div 标签，并单独定义宽度

  • 并调整表格布局：选项

几天后，我现在走到了尽头。我唯一能想到的就是故意将每行中的单元格数量增加三倍，以便 colspan 都是整数值。以我想要的方式格式化表格听起来很不方便并且非常困难。

这是一个网站的蝙蝠侠电影表——我正在建立一个练习网站，以学习 HTML/CSS。几个月来我一直在断断续续地使用 HTML，几周来一直在使用 CSS。

PS：它没有用于布局，我只是试图调整表格本身的布局。

4

3 回答 3

1

那么使用 colspan 的表格除了最后一行都很好吗？

您是否考虑过在最后一行的 colspaned 单元格中包含一个包含 3 个单元格的单行表？

<table>
    <thead>
        <tr>
           <th colspan="4">
           </th> 
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2"></td>    
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="4"></td>    
        </tr>
        <tr>
            <td></td>    
            <td></td>
            <td></td>    
            <td></td>
        </tr>
        <tr>
            <td colspan="4">
                <table>
                    <tbody>
                       <tr>
                           <td></td>
                           <td></td>
                           <td></td>
                       <tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

您可能还需要为内表设置宽度。

于 2012-10-08T21:28:25.957 回答
0

colspan是一个整数。它允许特定单元格扩展以填充多于一列。

例如：

-------------------------
|        |          |   |
-------------------------
|                   |   |
-------------------------

第二行的第一个单元格有colspan="2"。使用width（HTML 或 CSS）以更绝对的方式设置宽度。

此表的 HTML 如下所示：

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

请注意，第二行只有两个单元格，因为第一行占据了两列。

编辑
所以基本上，你需要整数。您有一行有 4 个单元格，还有一行有三个单元格。所以 4 行中的每个单元格占据了水平空间的 1/4。3 行中的每个单元格占用水平空间的 1/3。现在你需要使这些分数等价。

我会为你省去做数学的步骤。第colspan4 行中的每个单元格是3，第 3 行中的 colspan 是4。第colspan1 行是...鼓声请12...。

<table>
    <tr>
        <td colspan="12"></td>
    </tr>
    <tr>
        <td colspan="4"></td>
        <td colspan="4"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td colspan="3"></td>
        <td colspan="3"></td>
        <td colspan="3"></td>
        <td colspan="3"></td>
    </tr>
</table>

生产

-------------
|           |
-------------
|   |   |   |
-------------
|  |  |  |  |
-------------
于 2012-10-08T21:17:35.380 回答
0

我能想到几个选择：

1）。使用嵌套的 div 而不是表格。行可以是具有相同宽度的 div，而单元格可以是具有以百分比指定的相对宽度的 div。（50%、25%、33%）

    <div class="row"><div class="cell100"></div></div>
    <div class="row"><div class="cell50"></div><div class="cell50"></div></div>
    ...

2）。如果您觉得出于某种原因需要使用表格，您可以指定表格的列数与每行所有单元格计数的最小公倍数匹配。例如，您的将是 1、2、3 和 4。最小公倍数是 12。一个单元格的行将有一个 colspan 为 12 的单元格。一个有 2 个单元格的行将有一个 colspan 为 6 的单元格。3 个单元格将每个单元格的 colspan 为 4。4 个单元格的 colspan 为 3。

    <表格>
    <tr><td colspan="12">...</td></tr>
    <tr><td colspan="6">...</td><td colspan="6">...</td></tr>
    ...
    <tr><td colspan="3">...</td><td colspan="3">...</td><td colspan="3">...</td></ tr>
    </table>

3）。或者，您可以使用与bootstrap或960 网格系统或任何其他网格系统一起提供的网格系统。

我推荐 1 或 3，因为它们是可重复使用的，但是选项 2 也可以。

于 2012-10-08T21:32:22.560 回答