调整 td 的宽度以使行宽均匀

Question

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

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


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


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


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


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

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

• 标题为 1000 像素宽


• 第 2 行中的单元格将是 500 像素/每个


• 第三行的单元格为 1000 像素


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


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

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

• 尝试宽度：## CSS 代码


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


• td 标签内


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


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


• 并调整表格布局：选项

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

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

PS：不是用来布局的，我只是想调整一下表格本身的布局。

Answer 1

所以使用 colspan 的表格除了最后一行都很好？

您是否考虑过在最后一行的并列单元格中包含一个包含 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

我能想到几个选项：

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

...

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

... ... ... ... ... ... ... tr>

3)。或者您可以使用bootstrap 或960 grid system 或任何其他网格系统提供的网格系统。

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

【讨论】：

• 谢谢你的回答，我会试试这个。
• 只是出于好奇，有没有办法使用 div 来显示边框，相当于style = "border:2px solid white; border-collapse:collapse;"？

Answer 3

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>

生产

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