如何做可编辑的表

Question

我有一个表格，其中字段是可编辑的。问题是当我编辑一个字段然后剩下的字段移出表格。我在下面放了一个屏幕截图

任何人都可以提供帮助。

我的Html

<table class="table table-hover">
           <thead>
              <tr>
                 <th class="hidden-xs-down">#</th>
                 <th>Account Name</th>
                 <th class="hidden-xs-down">Phone</th>
                 <th class="hidden-xs-down">Account Name ALias</th>
                 <th></th>
              </tr>
           </thead>
           <tbody>
              <tr *ngFor = 'let student of students'>
                 <td class="hidden-xs-down">1</td>
                 <td contenteditable="true">
                    <a>{{student.accountname}}</a>
                 </td>
                 <td contenteditable="true" style="max-width:300px;" class ='phone'>
                    {{student.phone}}   
                 </td><i class = 'glyphicon glyphicon-pencil'></i>
                 <td contenteditable="true">
                    {{student.accountownername}}
                 </td>
                 <td>

              </tr>

           </tbody>
        </table>

Answer 1

您不能直接在td元素上设置max-width。您可以使用以下命令设置宽度或截断字符串：

    .truncate {
      width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }