2

我正在尝试“嵌套”（不确定这是否是正确的词）一些表。我不希望每个单元格中都有一个表格，而是希望能够用适当的标题组织表格。我的工程师告诉我，我不能简单地将表格样式设置为“看起来”嵌套，而是如果每个标题都包含子行和单元格会更好。

这是它应该是什么样子的屏幕截图：

在此处输入图像描述

这是我的 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在其他tbodys 中。这在 Chrome 中渲染得很好。事实上，这就是我想要的样子。

但

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

有什么想法可以完成我想要达到的目标吗？

在此处输入图像描述

4

2 回答 2

1

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

  1. 删除嵌套的 tbody，并tr与与其级别关联的类一起使用。
  2. 根据其深度设计每个级别。我针对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>
于 2013-01-25T00:28:02.700 回答
-1

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

于 2013-01-25T00:37:44.570 回答