Wie man bearbeitbare Tabelle erhält

Question

Kürzlich versuchte ich editierbare Tabelle, aber wenn ich eine Spalte bearbeite, dann wird die gesamte Tabellenstruktur betroffen, ich zeigte es als ein Screenshot.

Zunächst

Wenn ich Bearbeitung versucht,

Mein html,

<div class="widget-body"> 
     <table class="table table-hover"> 
      <thead> 
       <tr> 
       <th class="hidden-xs-down">#</th> 
       <th> <a (click)='getstudents(1)'>Account Name</a></th> 
       <th class="hidden-xs-down"> <a (click)='getstudents(1)'>Phone</a></th> 
       <th class="hidden-xs-down"> <a (click)='getstudents(1)'>Account Name ALias</a></th> 
       <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr *ngFor = 'let student of students'> 
       <td class="hidden-xs-down">{{id}}</td> 
       <td contenteditable="true"> 
        <a>{{student.accountname}}</a> 
       </td> 
       <td contenteditable="true" class ='phone'> 
        {{student.phone}} 
       </td><i class = 'glyphicon glyphicon-pencil'></i> 
       <td contenteditable="true"> 
        {{student.accountownername}} 
       </td> 
       <td> 
        <div class="btn-group" dropdown> 
         <button id="dropdown-btn-one" class="btn btn-xs" dropdownToggle> 
         <i class="fa fa-caret-down"></i> 
         </button> 
         <ul class="dropdown-menu dropdown-menu-right" dropdownMenu role="menu" aria-labelledby="dropdown-btn-one"> 
          <li role="menuitem"><a class="dropdown-item pull-left" (click) = 'getstudentbyid(student._id)' data-toggle="modal" data-target="#editmodel">Edit</a></li> 
          <li role="menuitem"><a class="dropdown-item" (click) = 'deletestudentbyid(student._id)'>Delete</a></li> 
         </ul> 
        </div> 
       </td> 
       </tr> 

      </tbody> 
     </table> 

kann jemand help.Thanks vorschlagen.

Answer 1

Ein Ansatz wäre die Kopfbreiten zu geben, und die editierbaren Tabellenzellen word-break: break-all:

EDIT: hinzugefügt Breite zur TD. Ohne Chrome ein anderes Ergebnis in Chrome erhalten

th { 
    width:150px; 
} 

td { 
    width: 150px; 
    word-break: break-all; 
} 

http://jsbin.com/pejopadaju/edit?html,css,output