Question

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

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

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

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

第四个有4个单元......

第五行和最后一行有3个单元格。

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

标题为1000px宽

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

第3行中的单元格将为1000px

第4行的单元格为250px EACH

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

我发现我可以在前4行使用colspan，但是第5行（包含3个单元格）需要非整数值。第5行中的单元格不会超出它们的列而没有我可以告诉的colspan ......

尝试宽度：## CSS code

在每个单元格的div标签内

在td标签内

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

使用或不使用div标签来识别每个单元格，并单独定义宽度

并调整table-layout：option

几天后，我现在正处于绳索的尽头。我唯一能想到的是故意将每行中的单元格数量增加三倍，以便colspan将是所有整数值。这听起来很不方便，并且按照我喜欢的方式格式化表格是不合理的。

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

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

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

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

Answer 2

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。现在你需要制作这些fractions equivalent。

我会为你节省数学的步骤。 4行中每个单元格的colspan为3，3行中的colspan为4。 1行中的colspan是...鼓号... 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>

产生

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

Answer 3

我可以想到几个选项：

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个单元格将每个都有4个colspan。每个细胞都有3个colspan。


    <table>
    <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 grid system或任何其他网格系统提供的网格系统。

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

调整td的宽度使行宽均匀

3 个答案: