组合表格、div 和 span 时的 CSS

Posted 2023-02-24

【中文标题】组合表格、div 和 span 时的 CSS

【英文标题】：CSS when combining tables, divs and spans

【发布时间】：2012-09-29 00:01:19

【问题描述】：

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

是整个表格行的宽度？

【问题讨论】：

只是一个想法，但是<div class='table-row' style='width:100%'> 会发生什么？

【参考方案1】：

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

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