1

各行に異なるコンテンツがあり、各行にコンサーティーナメカニズムがあるレスポンシブテーブルがあります。

コンサーティーナは基本的に、現在の行の下に別のテーブル行を追加します。これには、テーブル内のセルの量の colspan を持つ td があります。

このコンサーティーナ内には、親テーブルと整列するためにテーブル セルが必要な別のテーブルがあります。これはおそらく HTML/CSS だけでは不可能であり、おそらく JS で行う必要があると思いますか?

それとも別の方法がありますか？

ここにすべてのコードを投稿することはできませんが、ここに私が意味することのスクリーンショットがあります

ここに画像の説明を入力

<table class="parent-table">
<tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
</tr>
<tr>
    <td colspan="6" class="concertina">
        <div>
            <table>
                <tr>
                    <td>Other 1</td>
                    <td>Other 2</td>
                    <td>Other 3</td>
                    <td>Other 4</td>
                    <td>Other 5</td>
                    <td>Other 6</td>
                </tr>
            </table>
        </div>
    </td>
</tr>

4

2 に答える 2

0

短い答えは「いいえ」です。HTML/CSS だけでは不可能です。私自身、サイズ変更可能な列を備えた固定ヘッダーのスクロール可能なテーブルに加えて、列ヘッダーの境界線をダブルクリックして自動調整する作業を行っています。それは完全には程遠いです。おおむねそれがあなたが向かっているかもしれない方向であるなら、あなたは深呼吸をしたいと思うかもしれません。

以下の更新

スクリーンショットから判断して、HTML 構造を修正することを検討しましたか?

以下のマークアップから、複数のセクションがあり、それぞれに要素を含む<tbody>最初のセクションがあります。残りは、典型的な要素を含む詳細データ、行を表示します。<tr><th><tr><td>

jQuery では$('tr:has(th)')、ヘッダー行の$('tr:has(td)')選択とデータ行の選択に使用できます。

ヘッダーの最後<th>には、後続のデータ行を単に表示/非表示にする「More/Less」コントロールが格納されます。

代わりにこれでうまくいきますか？

<table class="master-table">
        <tbody class="concertina">
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th>Header 4</th>
                <th>Header 5</th>
                <th>Header 6</th>
                <th>More</th>
            </tr>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
                <td>Cell 3</td>
                <td>Cell 4</td>
                <td>Cell 5</td>
                <td colspan="2">Cell 6</td>
            </tr>
        </tbody>
        <tbody class="concertina">
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th>Header 4</th>
                <th>Header 5</th>
                <th>Header 6</th>
                <th>More</th>
            </tr>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
                <td>Cell 3</td>
                <td>Cell 4</td>
                <td>Cell 5</td>
                <td colspan="2">Cell 6</td>
            </tr>
        </tbody>
    </table>

于 2013-04-23T14:57:33.663 に答える