0

テーブルに表示したいアイテムのリストがあります（ブートストラップのスタイルを活用したいため）。しかし、テーブルを並べ替え可能にするのに問題があるため、各行に基本的に2つの行（1つの情報行と1つの詳細行）を含める必要があります。

情報行には、いくつかのステータスアイコンとアイテム名が表示されます。詳細行には、任意の量のテキストが含まれます。

私はこの答えを使用して、各テーブル行内に2つのdiv/span行を作成しています。

<style>
    .table-row {
        display: table-row;
    }
    .data_column {
        display: table-cell;
    }
    .icon_column {
        width: 20px;
        display: table-cell;
    }
</style>

<table class="table table-condensed>
    <thead>
        <tr class="table_header">
            <th>
                <div class='table-row'>
                    <span class="icon_column"><i class="icon-ok"></i></span>
                    <span class="icon_column"><i class="icon-star icon-large"></i></span>
                    <span class="icon_column"></span>
                    <span class="data_column">Name</span>
                    <span class="data_column">Date</span>
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        {% for action in actions %}
            <tr class="item_row">
                <td>
                    <div class='table-row'>
                        <span class="icon_column"><input type="checkbox"></span>
                        <span class="icon_column"><i class="icon-star-empty icon-large"></i></span>
                        <span class="icon_column"><i class="icon-exclamation-sign icon-green"></i></span>
                        <span class="data_column">{{ action }}</span>
                        <span class="data_column">{{ action.previous_reset_date|date:"M d" }}</span>
                    </div>
                    <div class='table-row'>
                        <span>{{ action.notes|apply_markup:"creole" }}</span>
                    </div>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>

私の問題は、2番目の「テーブル行」が個々の列のように表示されていることです。テーブル全体の幅には及びません。これが厳密なテーブルの場合、colspan="5"のようなことをする必要があります。この部分が次のようになるようにCSSを変更するにはどうすればよいですか。

<div class='table-row'>
    <span>{{ action.notes|apply_markup:"creole" }}</span>
</div>

テーブル行全体の幅は？

4

1 に答える 1

0

2 番目の div 行からクラスを削除すると、正常に動作します。

<div>
    <span>{{ action.notes|apply_markup:"creole" }}</span>
</div>
于 2012-10-08T19:17:22.780 に答える