Как сделать редактируемые таблицу

Question

У меня были таблица, в которой поле editable.The проблема, когда я изменить поле, то остальные поля перемещаются из table.I поместить снимок экрана ниже

Может ли кто-нибудь предложить помощь, пожалуйста.

Мои 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

Вы не можете сразу установить максимальную ширину на элементе тд. Вы можете установить ширину или, может быть, оборвать строку:

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