组合表格，div和span时的CSS [英] CSS when combining tables, divs and spans

问题描述

我有一个要显示在表中的项目列表（因为我想利用引导的样式）。但是因为我有问题使表格排序我希望每行基本上包含两行，一个信息行和一个详细信息行。

I have a list of items I want to display in a table (because I want to leverage the styling from bootstrap). But because I am having issues making the table sortable I want each row to essentially contain two rows, one information row and one detail row.

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

The information row will have some status icons and the item name. The detail row will have any quantity of text.

我正在使用这个答案在每个表格行中创建两个div / span行：

I'm using this answer to create two div/span rows within each table row:

<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，以便这一部分：

My issue is that the second "table-row" is displaying like an individual column. It doesn't span the width of the entire table. If this were a strict table, I would need to do something like colspan="5". How do I change the css so that this portion:

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

是整个表行的宽度？

推荐答案

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

If I remove the class from the second div row, it works fine.

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

这篇关于组合表格，div和span时的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！