0

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

图片由 ImageShack.us 托管

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

图片由 ImageShack.us 托管

每行的第一组数据有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>

是否可以对无表设计做同样的事情（每行消除两个表）

4

1 回答 1

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

于 2013-11-05T17:12:08.430 回答