テーブルデータがコンテナを超えてオーバーフローする

Question

ブートストラップテーブルでフィールド値が長すぎると、コンテナを過ぎてもテーブルの長さがパラメータの長さになります。私がこれを幾分防ぐことができた唯一の方法は、responsive-tableを使用することですが、スクロールバーが下に表示され、右にスクロールしてテーブルデータを表示する必要があります。テーブルがコンテナの長さに達すると、行データが折り返されます。ここで

は何が起こっているかのイメージである：ここで

http://i.stack.imgur.com/Bo1dO.jpgが私の見解の一部であり、CSSおよび例はここで見ることができます：あなたは解散する必要がhttps://jsfiddle.net/bsxtpoqd/

<div class="container"> 
    <div class="row tab-content"> 
     <div class="row"> 
      <h3>Assigned Games</h3> 
      <p>Please enter a search string in the textbox to search for users</p> 

      <form class="form-inline"> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="tableSearch" placeholder="Enter search term..."> 
       </div> 
      </form> 
      <div class="table"> 
       <table id="userTable" class="table"> 
        <thead> 
         <tr> 
          <th>UserName</th> 
          <th>Alternate</th> 
          <th>Email</th> 
          <th>Assigned Games</th> 
          <th>Unassigned Games</th> 
         </tr> 
        </thead> 
        <tbody> 
         @foreach (var user in Model) 
         { 
          <tr> 
           <td>@Html.ActionLink(user.UserName, "_GameAssigner", "Admin", new { insUserId = user.InstitutionUserId }, new { @class = "modal-link" })</td> 
           <td> 
            @user.AlternateId 
           </td> 

           <td>@user.Email</td> 
           <td> 
            @if (user.Assigned.Any()) 
            { 
             <a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus" 
              data-content="@foreach (var gameName in user.Assigned){<div>@gameName</div>}"> 
              @user.Assigned.Count</a> 
            } 
            else 
            { 
             <div class="text-warning">0</div> 
            } 
           </td> 
           <td> 
            @if (user.Unassigned.Any()) 
            { 
             <a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus" 
              data-content="@foreach (var gameName in user.Unassigned) {<div>@gameName</div>}"> 
             @user.Unassigned.Count</a> 
            } 
            else 
            { 
             <div class="text-warning">0</div> 
            } 
           </td> 

          </tr> 
         } 

        </tbody> 

       </table> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

長い言葉。

<td style="word-break:break-all"> 

Answer 2

これはあなたが必要です：

<style> 
td 
{ 
word-break: normal; 
} 
</style>