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

问题描述

我有一个列表，我想在一个表中显示（因为我想利用bootstrap的样式）。但由于我遇到问题使表格可排序 a>我希望每一行基本上包含两行，一个信息行和一个详细信息行。

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>

我的问题是第二个table-row显示为一个单独的列。它不跨越整个表的宽度。如果这是一个严格的表，我需要做一些像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和跨度时的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！