html - Bootstrap 表每行有两个不同长度的水平列

Question

我有一张用 bootstrap 装饰的 table 。 这是简单的 TableView (已折叠)。

每个表格行都有两组水平数据。因此，当单击“详细信息”按钮时，会显示每行的展开 View 。这是展开的 View 。

每一行的第一组数据有4列。虽然我希望同一行的第二组数据完全占据整个表格宽度。

问题是我觉得我做这件事的方式不是最好的方式。我几乎使用 Angular 循环构造来重复 <tr> .然后我为每个 <tr> 嵌入了两个表这样我就可以在第一个表中显示第一个数据集，在第二个表中显示扩展 View 。单击“详细信息”按钮显示行的第二组(表格)数据。

<table class="table-hover table-condensed">
    <!--<table class="table">-->
    <thead>
        <tr>
            <th align="left" class="span2">Date</th>
            <th align="left" class="span2">Title</th>
            <th align="left" class="span2">Bill Total</th>
            <th align="left" class="span4">Options</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="ibill in user.groups[0].bills | filter:query | orderBy:'date'">
            <td colspan="4">
                <table>
                    <tr>
                        <td class="span2">{{ ibill.billDate | date:'MM/dd/yyyy'}}</td>
                        <td class="span2">{{ ibill.title }}</td>
                        <td class="span2">${{ ibill.billTotal }}</td>
                        <td class="span4">
                            <!-- <a ng-click='deleteBill(ibill.id)'><i class="icon-trash "></i></a>
                                <a  href="#/bills/edit/0/{{$index}}"><i class="icon-pencil "></i></a>--> <a ng-click='deleteBill(ibill.id)' class="btn btn-mini" ng-init="ibill.isCollapsed = 'true'" ng-click="ibill.isCollapsed = !ibill.isCollapsed"><i class=" icon-trash"></i></a>
 <a href="#/bills/edit/0/{{$index}}" class="btn btn-mini" ng-init="ibill.isCollapsed = 'true'" ng-click="ibill.isCollapsed = !ibill.isCollapsed"><i class="icon-edit"></i></a>
 <a class="btn btn-mini" ng-init="ibill.isCollapsed = 'true'" ng-click="ibill.isCollapsed = !ibill.isCollapsed"><i class="icon-eye-open"></i>&nbsp;details</a>

                            <!--<a class="btn" ng-init="ibill.isCollapsed=' true'" ng-click="ibill.isCollapsed=! ibill.isCollapsed"><i class="icon-folder-open "></i> Details</a>-->
                        </td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td colspan="4">
                            <div collapse="ibill.isCollapsed">
                                <div>
                                    <p ng-repeat="simplecost in ibill.billSimpleEntry.simpleUserIdAndLiableCost">{{simplecost.user.fName}} owes ${{simplecost.liableCost}}</p>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
            <!--<td>{{ibill}}</td>-->
        </tr>
        <!-- <tr>
                          <td><div collapse="ibill.isCollapsed">
                            <div class="well well-large">Some content</div> 
                    </div></td>
                      </tr>-->
    </tbody>
</table>

我很喜欢

<table>
    <thead></thead>
    <tbody>
        <tr>
            <td></td>
    </tbody>
</table>

是否可以用无表设计(每行消除两个表)做同样的事情

Answer 1

您可以只在 td 上使用 colspan 属性来实现相同的效果，而无需表格。例如:

<table>
    <tbody>
        <tr> <!--normal row stuff-->
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan='4'><!--details stuff here--></td>
        </tr>
    </tbody>
</table>

在此示例中，colspan='4' 的 td 将是一个单元格，其宽度与上一行中的 4 个单元格相同。