Question

我正试图“筑巢”（不确定这是否是正确的词）一些表格。我不想在每个单元格中使用表格，而是需要使用适当的标题来组织表格。我的工程师告诉我，我不能简单地将表格设置为“看起来”嵌套，而是如果每个标题包裹子行和单元格会更好。

以下是屏幕截图：

enter image description here

这是我的HTML：

<section class="container">
    <table class="zebra">
        <thead>
            <tr>
                <th>Code</th>
                <th>Procedure</th>
                <th>Units</th>
                <th>Charge</th>
                <th>Avg. Charge</th>
                <th>As %</th>
            </tr>
        </thead>
        <tbody class="level1">
            <tr>
                <td colspan="6">
                    <i class="doctor"></i>John Dorian
                </td>
            </tr>
            <tbody class="level2">
                <tr>
                    <td colspan="6">
                        <i class="address"></i>Southern Hills Hospital
                    </td>
                </tr>
                <tbody class="level3">
                    <tr>
                        <td>99234</td>
                        <td>Chest XRay</td>
                        <td>1</td>
                        <td>20.00</td>
                        <td>40.00</td>
                        <td>10.00</td>
                    </tr>
                    <tr>
                        <td>99234</td>
                        <td>Chest XRay</td>
                        <td>1</td>
                        <td>20.00</td>
                        <td>40.00</td>
                        <td>10.00</td>
                    </tr>
                    <tr>
                        <td>99234</td>
                        <td>Chest XRay</td>
                        <td>1</td>
                        <td>20.00</td>
                        <td>40.00</td>
                        <td>10.00</td>
                    </tr>
                </tbody>
            </tbody>
        </tbody>
        <tbody class="level1">
            <tr>
                <td colspan="6">
                    <i class="doctor"></i>John Dorian
                </td>
            </tr>
            <tbody class="level2">
                <tr>
                    <td colspan="6">
                        <i class="address"></i>Southern Hills Hospital
                    </td>
                </tr>
                <tbody class="level3">
                    <tr>
                        <td>99234</td>
                        <td>Chest XRay</td>
                        <td>1</td>
                        <td>20.00</td>
                        <td>40.00</td>
                        <td>10.00</td>
                    </tr>
                    <tr>
                        <td>99234</td>
                        <td>Chest XRay</td>
                        <td>1</td>
                        <td>20.00</td>
                        <td>40.00</td>
                        <td>10.00</td>
                    </tr>
                    <tr>
                        <td>99234</td>
                        <td>Chest XRay</td>
                        <td>1</td>
                        <td>20.00</td>
                        <td>40.00</td>
                        <td>10.00</td>
                    </tr>
                </tbody>
            </tbody>
            <tbody class="level2">
                <tr>
                    <td colspan="6">
                        <i class="address"></i>Southern Hills Hospital
                    </td>
                </tr>
                <tbody class="level3">
                    <tr>
                        <td>99234</td>
                        <td>Chest XRay</td>
                        <td>1</td>
                        <td>20.00</td>
                        <td>40.00</td>
                        <td>10.00</td>
                    </tr>
                    <tr>
                        <td>99234</td>
                        <td>Chest XRay</td>
                        <td>1</td>
                        <td>20.00</td>
                        <td>40.00</td>
                        <td>10.00</td>
                    </tr>
                    <tr>
                        <td>99234</td>
                        <td>Chest XRay</td>
                        <td>1</td>
                        <td>20.00</td>
                        <td>40.00</td>
                        <td>10.00</td>
                    </tr>
                </tbody>
            </tbody>
            <tbody class="level2">
                <tr>
                    <td colspan="6">
                        <i class="address"></i>Southern Hills Hospital
                    </td>
                </tr>
                <tbody class="level3">
                    <tr>
                        <td>99234</td>
                        <td>Chest XRay</td>
                        <td>1</td>
                        <td>20.00</td>
                        <td>40.00</td>
                        <td>10.00</td>
                    </tr>
                    <tr>
                        <td>99234</td>
                        <td>Chest XRay</td>
                        <td>1</td>
                        <td>20.00</td>
                        <td>40.00</td>
                        <td>10.00</td>
                    </tr>
                    <tr>
                        <td>99234</td>
                        <td>Chest XRay</td>
                        <td>1</td>
                        <td>20.00</td>
                        <td>40.00</td>
                        <td>10.00</td>
                    </tr>
                </tbody>
            </tbody>
        </tbody>
    </table>

所以你可以看到我在其他tbody内嵌套tbody。这在Chrome中渲染很好。事实上，这就是我想要的样子。

BUT

当我检查元素时，我看到Chrome（和Safari和Firefox）基本上说“nuh uh”并打破嵌套的tbody。见这里：

任何想法如何实现我想要到达的目标？

enter image description here

Answer 1

我认为你的解决方案太复杂了。鉴于您提供的屏幕截图，实际上不需要嵌套。你的工程师错了，你可以设置表格来嵌套。

删除嵌套的tbodys，并使用tr与其级别关联的类。
根据它的深度设置每个级别的样式。我定位每个td中的第一个td，以应用padding-left值使其看起来嵌套。

这是Jsfiddle：http://jsfiddle.net/msV2U/

CSS：

body { font-family: arial; }

table { width: 100%; }

thead th { background-color: #f6f6f6; padding: 5px; }
table td { border: 1px solid #DDD; padding: 5px; }

tr.level1 td { font-weight: bold ;}
tr.level2 td:first-child,
tr.level3 td:first-child { padding-left: 25px; }

HTML：

<table class="zebra">
    <thead>
        <tr>
            <th>Code</th>
            <th>Procedure</th>
            <th>Units</th>
            <th>Charge</th>
            <th>Avg. Charge</th>
            <th>As %</th>
        </tr>
    </thead>
    <tbody>
        <tr class="level1">
            <td colspan="6">
                <i class="doctor"></i>John Dorian
            </td>
        </tr>
        <tr class="level2">
            <td colspan="6">
                <i class="address"></i>Southern Hills Hospital
            </td>
        </tr>
        <tr class="level3">
            <td>99234</td>
            <td>Chest XRay</td>
            <td>1</td>
            <td>20.00</td>
            <td>40.00</td>
            <td>10.00</td>
        </tr>
        <tr class="level3">
            <td>99234</td>
            <td>Chest XRay</td>
            <td>1</td>
            <td>20.00</td>
            <td>40.00</td>
            <td>10.00</td>
        </tr>
        <tr class="level3">
            <td>99234</td>
            <td>Chest XRay</td>
            <td>1</td>
            <td>20.00</td>
            <td>40.00</td>
            <td>10.00</td>
        </tr>
        <tr class="level1">
            <td colspan="6">
                <i class="doctor"></i>John Dorian
            </td>
        </tr>
        <tr class="level2">
            <td colspan="6">
                <i class="address"></i>Southern Hills Hospital
            </td>
        </tr>
        <tr class="level3">
            <td>99234</td>
            <td>Chest XRay</td>
            <td>1</td>
            <td>20.00</td>
            <td>40.00</td>
            <td>10.00</td>
        </tr>
        <tr class="level3">
            <td>99234</td>
            <td>Chest XRay</td>
            <td>1</td>
            <td>20.00</td>
            <td>40.00</td>
            <td>10.00</td>
        </tr>
        <tr class="level3">
            <td>99234</td>
            <td>Chest XRay</td>
            <td>1</td>
            <td>20.00</td>
            <td>40.00</td>
            <td>10.00</td>
        </tr>
        <tr class="level1">
            <td colspan="6">
                <i class="doctor"></i>John Dorian
            </td>
        </tr>
        <tr class="level2">
            <td colspan="6">
                <i class="address"></i>Southern Hills Hospital
            </td>
        </tr>
        <tr class="level3">
            <td>99234</td>
            <td>Chest XRay</td>
            <td>1</td>
            <td>20.00</td>
            <td>40.00</td>
            <td>10.00</td>
        </tr>
        <tr class="level3">
            <td>99234</td>
            <td>Chest XRay</td>
            <td>1</td>
            <td>20.00</td>
            <td>40.00</td>
            <td>10.00</td>
        </tr>
        <tr class="level3">
            <td>99234</td>
            <td>Chest XRay</td>
            <td>1</td>
            <td>20.00</td>
            <td>40.00</td>
            <td>10.00</td>
        </tr>
    </tbody>
</table>

Answer 2

新信息曝光，这个问题不再适用。谢谢。

嵌套表不起作用

2 个答案: