为什么这张桌子看起来不整洁？ [英] why doesn't this table look neat?

问题描述

我想基本单元格是20px每边。然后我想要«合并的单元格»（与rowspan或colspan> 1）有一个大小匹配尽可能多的基本单元格他们覆盖。

I want the base cells to be 20px per side. Then I want «merged cells» (with rowspan or colspan > 1) to have a size matching as much base cells they cover.

实现这里我手动设置宽度的合并细胞。但在某些配置中，它的行为很奇怪，如上图所示。

to achieve this I manually set the width of those merged cells. But in some configurations, it behaves strangely, like in the figure above.

蓝色正方形覆盖2×2个单元格，大小正确。但是绿色正方形（和所有其他大的）是5x2，应该和它的邻居，108px一样大。

the blue square covers 2x2 cells and is correctly sized. But the green square (and all the other large ones) is 5x2 and should be as large as its neighbour, 108px.

为什么chrome丢弃我强制的维度？ （未测试其他浏览器）

Why does chrome discard the dimensions I force ? (didn't test other browsers)

您会在这里找到一个jsFiddle： http://jsfiddle.net/kjshk/

you will find a jsFiddle here: http://jsfiddle.net/kjshk/

HTML如下所示：

<table>
    <tbody>
        <tr>
            <td ></td>
            <td colspan="9" rowspan="1" style="width: 196px; height: 20px; "></td>
        </tr>
        <tr>
            <td  colspan="8" rowspan="1" style="width: 174px; height: 20px; "></td>
            <td ></td>
            <td ></td>
        </tr>
        <tr>
            <td ></td>
            <td colspan="7" rowspan="2" style="width: 152px; height: 42px; "></td>
            <td colspan="2" rowspan="2" style="width: 42px; height: 42px; background-color:blue "></td>
        </tr>
        <tr>
            <td ></td>
        </tr>
        <tr>
            <td colspan="5" rowspan="2" style="width: 108px; height: 42px; "></td>
            <td  colspan="5" rowspan="2" style="width: 108px; height: 42px; background-color:green "></td>
        </tr>
    </tbody>
</table>​

---

编辑：
我更新了jsFiddle的外观，但增加了一行强制正确的大小
http://jsfiddle.net/kjshk/11/

编辑：我不能真正地改变HTML结构，因为它是动态生成的（有一个脚本合并单元格，事实上）。

edit²: I cannot really change the HTML structure, because it's generated dynamically (there a script which merge cells, in fact). So what I can act is on the style.

推荐答案

如果你改变百分比：这有帮助吗？

If you change percentage: does this help ?

<table
    <tbody>
        <tr>
            <td ></td>
            <td colspan="9" rowspan="1" style="width: 90%; height: 20px; "></td>
        </tr>
        <tr>
            <td  colspan="8" rowspan="1" style="width: 80%; height: 20px; "></td>
            <td ></td>
            <td ></td>
        </tr>
        <tr>
            <td ></td>
            <td colspan="7" rowspan="2" style="width: 70%; height: 42px; "></td>
            <td colspan="2" rowspan="2" style="width: 20%; height: 42px; background-color:blue "></td>
        </tr>
        <tr>
            <td ></td>
        </tr>
        <tr>
            <td colspan="5" rowspan="2" style="width: 50%; height: 42px; "></td>
            <td  colspan="5" rowspan="2" style="width: 50%; height: 42px; background-color:green "></td>
        </tr>
        <tr></tr>
    </tbody>
</table>

how it should look:
<table>
    <tbody>
        <tr>
            <td ></td>
            <td colspan="9" rowspan="1" style="width: 196px; height: 20px; "></td>
        </tr>
        <tr>
            <td  colspan="8" rowspan="1" style="width: 174px; height: 20px; "></td>
            <td ></td>
            <td ></td>
        </tr>
        <tr>
            <td ></td>
            <td colspan="7" rowspan="2" style="width: 152px; height: 42px; "></td>
            <td colspan="2" rowspan="2" style="width: 42px; height: 42px; background-color:blue "></td>
        </tr>
        <tr>
            <td ></td>
        </tr>
        <tr>
            <td colspan="5" rowspan="2" style="width: 108px; height: 42px; "></td>
            <td  colspan="5" rowspan="2" style="width: 108px; height: 42px; background-color:green "></td>
        </tr>
        <tr></tr>
        <tr>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
        </tr>
    </tbody>
</table>

这篇关于为什么这张桌子看起来不整洁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！