我可以使用ng-repeat in angular对齐表格标题吗?

时间:2015-12-12 21:33:07

标签: javascript html css angularjs

我修改了meanjs生成器列表中的代码来创建表而不是列表。但是,第一个标题覆盖了两列数据,第二个标题自身向右延伸,并不包含任何内容。无论如何使用或不使用ng-table将这些列与标题对齐(最好没有)?我是一个新的角度和堆栈溢出,所以我提前道歉,如果这是一个重复的问题或不清楚。

    <div class="list-group">
    <table class="list-group-table">
      <tr><th class="list-todos-left-header">Project and Task</th><th class="list-todos-right-header">Author Date</th></tr>
      <tr data-ng-repeat="todo in todos" class="list-group-item">
          <td class="list-todos-left-col">
            <h4 class="list-group-item-heading" data-ng-bind="todo.title"></h4>
            <a class="list-group-item-text" data-ui-sref="todos.view({todoId: todo._id})" data-ng-bind="todo.content"></a>
          </td>
          <td class="list-todos-right-col">
            <table>
                <tr><td><span data-ng-bind="todo.created | date:'mediumDate'"></span></td></tr>
                <tr><td><span data-ng-bind="todo.user.displayName"></span></td></tr>

            </table>
          </td>
        </tr>
    </table>
  </div>

    @media (min-width: 992px) {
  .nav-users {
    position: fixed;
  }
}
    .list-group-table {
  background-color: #CCCCCC;
  border: 3px inset #000000; 
}
    .list-group-item{
  background-color: #CCCCCC;

}
    .list-group-item-heading {
  font-size: 20px;
  color: yellow;
}
    .list-todos-left-header {
  max-width: 70%;
  min-width: 60%;
  border: 2px inset #111111;
}
    .list-todos-left-col {
  width: 60%;
  border: 2px inset #111111;
}
    .list-todos-right-col {
  max-width: 70%;
  width: 20%;
  border: 2px inset #111111;
}
    .list-todos-right-header {
  max-width: 20%;
  min-width: 20%;
  border: 2px outset #000000;
}

0 个答案:

没有答案