css - 如何为 ngtable 设置可扩展细节的样式？

Question

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

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

这个问题与 CSS 更相关。

问题是，当单击 ServiceType 列旁边的加号图标时，4 个展开的列未与父表列标题对齐，即 Service Type、Location、Contact details 和 Last Updated。

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

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

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

Answer 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>