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だから、私が他tbodyの s内にネストしていることがわかります。これはChromeでうまくレンダリングされます。実際、それは私がそれをどのように見せたいかです。

しかし

要素を調べると、Chrome (および Safari と Firefox) は基本的に "nuh uh" と言って、ネストされたtbodys を分割していることがわかります。ここを参照してください：

ここで取得しようとしていることを達成する方法はありますか?

ここに画像の説明を入力

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 に答える