html - 嵌套表不起作用

标签 html css html-table nested

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

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

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 中呈现良好。事实上，这就是我想要的样子。

但是

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

有什么想法可以实现我在这里想要实现的目标吗？

enter image description here

最佳答案

我认为您将解决方案复杂化了。鉴于您提供的屏幕截图，确实不需要嵌套。您的工程师错了，您可以设计表格以使其看起来嵌套。

  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>

关于html - 嵌套表不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14513199/

上一篇：jquery - 类型错误 : undefined

下一篇：javascript - 如何在没有元标记的情况下将 IE 更改为非兼容模式

相关文章：

html - 使用值而不是索引从 HTML 下拉列表中选择的 VBA 代码

html - 我的标题在按钮悬停效果时摇晃

javascript - 将行添加到表并发送到服务器，通过 jquery 将表发布到 php

html - 使用xsl填充html表格中的空行

javascript - 使用innerHTML构建动态表格

html - 如何将 flex 元素右对齐？

php - 使用 PHP 关闭或修复损坏的 img 标签

CSS下拉菜单将页面内容向下推

html - <button> 与 &lt;input type ="image">

html - 如何使用 CSS 制作成 Angular 工具提示指针元素？

©2024 IT工具网  联系我们