html - 合并表格、div 和 span 时的 CSS

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>