Question

我有一张用bootstrap装饰的桌子。这是简单的表格视图（折叠）。

Image Hosted by ImageShack.us http://imageshack.us/a/img854/2017/6db4.png

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

Image Hosted by ImageShack.us http://imageshack.us/a/img35/1263/pewo.png

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

问题是我这样做的方式并不是最好的方法。我几乎使用Angular循环结构来重复<tr>。然后我按<tr>嵌入了两个表，以便我可以在第一个表中显示第一个数据集，在第二个表中显示扩展视图。单击“详细信息”按钮显示第二组（表）行数据。

<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个单元格相同。

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

1 个答案: