如何为 ngtable 设置可扩展细节的样式？答案

【问题标题】：how to style ngtable with expandable detail?如何为 ngtable 设置可扩展细节的样式？
【发布时间】：2014-07-08 15:23:23
【问题描述】：

我正在尝试设置 ng-table 布局的样式，该布局在每一行中都包含一个表格。这种扩展功能以 Angular 实现的方式如下所示：

<tr ng-if="org.expanded" ng-repeat-end>
  <td></td>
  <td></td>
</tr>

这个问题与 CSS 更相关。

问题在于，当单击 ServiceType 列旁边的加号图标时，4 个展开的列未与父表列标题对齐，即服务类型、位置、联系方式和上次更新。

我怎样才能设置它，使值看起来很好对齐（左）？

另外，我无法将 Last Updated 列左对齐。

这是问题的 plunkr 示例： http://embed.plnkr.co/UlMg7J/preview http://plnkr.co/edit/UlMg7J?p=preview

【问题讨论】：

标签： css angularjs ngtable

【解决方案1】：

对于最后一列未对齐的问题，我用 div 替换了电话、网站..等的表格，它开始与您想要的位置对齐。它所做的是创建了不需要的额外标题（th）标签。

您的代码：

<td data-title="'Contact Details'">
    <table>
        <tr>
             <td>Phone:</td>
        </tr>
        <tr>
             <td>Fax:</td>
        </tr>
        <tr>
             <td>Email:</td>
        </tr>
        <tr>
             <td>Website:</td>
        </tr>
     </table>
</td>

更改代码：

<td data-title="'Contact Details'">
    <div>Phone:</div>
    <div>Fax:</div>
    <div>Email:</div>
    <div>Website:</div>
</td>

【讨论】：