组合表格、div 和 span 时的 CSS

Question

我有一个要在表格中显示的项目列表（因为我想利用引导程序中的样式）。但是因为我遇到问题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>