Question

我有一个要在表格中显示的项目列表（因为我想利用bootstrap中的样式）。但是因为我遇到了问题making the table sortable我希望每一行基本上包含两行，一行信息行和一行明细行。

信息行将包含一些状态图标和项目名称。详细信息行将包含任意数量的文本。

我正在使用this answer在每个表格行中创建两个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>

我的问题是第二个“表格行”显示为单个列。它不会跨越整个表格的宽度。如果这是一个严格的表，我需要做一些像colspan =“5”的事情。如何更改css以便这部分：

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

是整个表格行的宽度？

Answer 1

如果我从第二个div行中删除该类，它可以正常工作。

<div>
    <span>{{ action.notes|apply_markup:"creole" }}</span>
</div>

组合表，div和spans时的CSS

1 个答案: