編集可能テーブルの入手方法

Question

最近編集可能なテーブルを使用しようとしましたが、列を編集するとテーブル構造全体が有効になり、スクリーンショットとして表示されました。当初

、私が編集を試してみました

、

私の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> 

は、誰かがhelp.Thanksを提案することができます。

EDIT：TDに加え幅

Answer 1

一つのアプローチは、ヘッダー幅、および編集可能な表のセルword-break: break-allを与えるであろう。それを使わないでChromeに違う結果を得る

th { 
    width:150px; 
} 

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

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