Question

我有一张这样的桌子。在每个程序中，我有多种形式。每个表单都有一个名称，默认是/否字段（如果是，则为勾号）和状态字段ACTIVE / INACTIVE。

然而问题是我当前的代码弄乱了对齐。红线表示应在一行中对齐的所有项目。

Screenshot of table

我的代码如下：

<div class="scrollContainer">
<div class="fixedHeaderSection">
    <table class="table columnHeadings" style="table-layout: fixed">
        <tbody>
        <tr>
            <td class="col-md-4 col-sm-4 col-xs-4">
                Program
            </td>
            <td class="col-md-4 col-sm-4 col-xs-4">
                Forms
            </td>
            <td class="col-md-1 col-sm-1 col-xs-1">
            </td>
            <td class="col-md-3 col-sm-3 col-xs-3">
                Status
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="scrollableSection">
    <table class="table columnData" style="table-layout: fixed">
        <tr ng-repeat="program in programsList">
            <td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
                {{program.name}}
            </td>
            <td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
                <li ng-repeat="form in program.forms" style="list-style:none;">
                    {{form.name}}
                </li>
                + New Form
            </td>
            <td style="word-wrap: break-word;" class="col-md-1 col-sm-1 col-xs-1">
                <li ng-repeat="form in program.forms" style="list-style:none;">
                    <span ng-cloak ng-if="form.default == 'YES'" class="glyphicon glyphicon-ok"></span>
                </li>
            </td>
            <td style="word-wrap: break-word;" class="col-md-3 col-sm-3 col-xs-3">
                <li ng-repeat="form in program.forms" style="list-style:none;">
                    {{form.status}}
                </li>
            </td>
        </tr>
    </table>
</div>

我该如何解决这个问题？

Answer 1

问题很可能是您希望li元素在“正确”行中对齐。但这并不能保证，因为长篇文章会被分解，下一栏中的列表无法知道这一点。

您应该考虑为程序中的每个表单向表中添加更多行，并在第一列上使用rowspan或其他内容。

它有点乱，但应该完成它。

链接到“工作”的plnkr：http://plnkr.co/edit/Q9Ikmo3GVvtm3MdYlPNY?p=preview

  <table class="table columnData" style="table-layout: fixed" border="1">
    <tr ng-repeat-start="program in programsList">
      <td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4" rowspan="{{program.forms.length + 1}}">
        {{program.name}}
      </td>
      <td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
        + New Form
      </td>
      <td style="word-wrap: break-word;" class="col-md-1 col-sm-1 col-xs-1">
      </td>
      <td style="word-wrap: break-word;" class="col-md-3 col-sm-3 col-xs-3">
      </td>
    </tr>
    <tr ng-repeat-end ng-repeat="form in program.forms">
      <td>
        {{form.name}}
      </td>
      <td><span ng-cloak ng-if="form.default == 'YES'" class="glyphicon glyphicon-ok"></span></td>
      <td>{{form.status}}</td>
    </tr>
  </table>

Answer 2

你可以试试这个。我删除了li并使用了＆＃34; rowspan＆＃34;。你正在使用2个表，所以我只使用一个（thead + tbody）

来纠正它

<div class="scrollContainer">
        <table class="table columnHeadings" style="table-layout: fixed">
        <div class="fixedHeaderSection">
        <thead>
        <tr>
            <th class="col-md-4 col-sm-4 col-xs-4">
                Program
            </th>
            <th class="col-md-4 col-sm-4 col-xs-4">
                Forms
            </th>
            <th class="col-md-1 col-sm-1 col-xs-1">
            </th>
            <th class="col-md-3 col-sm-3 col-xs-3">
                Status
            </th>
        </tr>
        </thead>
        </div>
        <tbody>
        <div class="scrollableSection">

        <tr ng-repeat="program in programsList">
            <td rowspan="program.forms.length" style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
                {{program.name}}
            </td>
            <td ng-repeat="form in program.forms" style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
                {{form.name}}
                + New Form
            </td>
            <td ng-repeat="form in program.forms" style="word-wrap: break-word;" class="col-md-1 col-sm-1 col-xs-1">
                <span ng-cloak ng-if="form.default == 'YES'" class="glyphicon glyphicon-ok"></span>
            </td>
            <td ng-repeat="form in program.forms" style="word-wrap: break-word;" class="col-md-3 col-sm-3 col-xs-3">
                {{form.status}}
            </td>
        </tr>

        </div>
        </tbody>
    </table>

Answer 3

如果您不关心重构HTML，这可能是最简单的解决方案。

<tr ng-repeat="program in programsList">
    <td class="col-md-4 col-sm-4 col-xs-4">
        {{program.name}}
    </td>
    <td class="col-xs-8">
        <div ng-repeat="form in program.forms">
            <div class="col-md-4 col-sm-4 col-xs-4">
                {{form.name}}
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1">
                <span ng-cloak ng-if="form.default == 'YES'" class="glyphicon glyphicon-ok"></span>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3">
                {{form.status}}
            </div>
        </div>
        <div>
            + New Form
        </div>
    </td>
</tr>

此示例可能需要稍微调整一下，因为这是没有测试的。重点是使用单循环来实现＆＃39; program.forms＆＃39;。

具有ng-repeat的Angular JS表中的行内行

3 个答案: