ポップアップウィンドウ内にHTML5テーブルを合わせ、水平スクロールバーを外します

ポップアップコンテナサイズ内でテーブルのサイズを修正しようとしていましたが、多くのソリューションを確認してもそれを達成できませんでした。また、セルの固定サイズ内にテキストをラップすることもできませんでした。私は長い水平スクロールバーが表示されます。誰でも助けてくれますか？以下はポップアップウィンドウ内にHTML5テーブルを合わせ、水平スクロールバーを外します

は私のコードです：

$(document).ready(function() { 
 
      $(".EventLogGrid").width($(window).width()); 
 
     });

.EventLogGrid { 
 
       font-family: arial, sans-serif; 
 
       /*border-collapse: collapse;*/ 
 
       width: 100%; 
 
       border-color: #948E8C; 
 
       border: thin; 
 
       
 
      } 
 
    
 
    
 
    
 
       .EventLogGrid td { 
 
        /*border: 1px solid #d7d7d7;*/ 
 
        width: 5px; 
 
        border: 0.5px thin #d7d7d7; 
 
        text-align: left; 
 
        /*padding: 7px;*/ 
 
        white-space: nowrap !important; 
 
        text-overflow: ellipsis !important; 
 
        overflow: hidden !important; 
 
       } 
 
    
 
       .EventLogGrid th { 
 
        width: 5px; 
 
        border: 0.5px thin #d7d5d5; 
 
        background-color: #EDEDEE; 
 
        font-weight: 100; 
 
        text-align: left; 
 
        /*padding: 7px;*/ 
 
       } 
 
    
 
       .EventLogGrid tr:nth-child(odd) { 
 
        background-color: #EDEDEE; 
 
       } 
 
    
 
       .EventLogGrid tr:hover td { 
 
        
 
       } 
 
    
 
      .EventLogGrid body { 
 
       overflow-x: hidden; 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <body> 
 
     <table class="EventLogGrid" style="padding: 0px; "> 
 
      <tr> 
 
       <th> 
 
        Event Type 
 
       </th> 
 
    
 
       <th> 
 
        Event Description 
 
       </th> 
 
       <th> 
 
        Revision 
 
       </th> 
 
    
 
       <th> 
 
        Version 
 
       </th> 
 
       <th> 
 
        Log By 
 
       </th> 
 
    
 
       <th> 
 
        Log Date 
 
       </th> 
 
       <th> 
 
        Organization Name 
 
       </th> 
 
       <th> 
 
        Document Owner Organization 
 
       </th> 
 
      </tr> 
 
    
 
      @foreach (var item in Model.eventLogData) 
 
      { 
 
       <tr> 
 
        <td> 
 
         @Html.DisplayFor(modelItem => item.EventType) 
 
        </td> 
 
    
 
    
 
        <td> 
 
         @item.EventDescription 
 
        </td> 
 
        <td> 
 
         @Html.DisplayFor(modelItem => item.Revision) 
 
        </td> 
 
    
 
        <td> 
 
         @Html.DisplayFor(modelItem => item.DocVersion) 
 
        </td> 
 
        <td> 
 
         @Html.DisplayFor(modelItem => item.LogBy) 
 
        </td> 
 
        <td> 
 
         @Html.DisplayFor(modelItem => item.LogDate) 
 
        </td> 
 
        <td> 
 
         @Html.DisplayFor(modelItem => item.OrganizationName) 
 
        </td> 
 
        <td> 
 
         @Html.DisplayFor(modelItem => item.DocumetOwnerOrganizationName) 
 
        </td> 
 
       </tr> 
 
      } 
 
     </table> 
 
     
 
    
 
    </body> 
 
    </html>

出典

2017-04-18 user7721524

を試してみてください：ちょうどこれを行いますか？あなたが知っているなら、bootstrap.jsを使って水平スクロールを削除することができます。 –

はちょうどあなたの頭のタグに3つのリンクを追加して適用する水平方向のスクロールが削除されますテーブルに 'のdataTable' クラス

<html> 
<head> 
<title></title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     //$(".EventLogGrid").width($(window).width()); 
    }); 
    </script> 
    <style> 
    .EventLogGrid { 
     font-family: arial, sans-serif; 
     /*border-collapse: collapse;*/ 
     width: 96%; 
     border-color: #948E8C; 
     border: thin; 
     } 



     .EventLogGrid td { 
      /*border: 1px solid #d7d7d7;*/ 
      width: 3px !important; 
      border: 0.5px thin #d7d7d7; 
      text-align: left; 
      /*padding: 7px;*/ 
      white-space: nowrap !important; 
      text-overflow: ellipsis !important; 
      overflow: hidden !important; 
     } 

     .EventLogGrid th { 
      width: 3px !important; 
      border: 0.5px thin #d7d5d5; 
      background-color: #EDEDEE; 
      font-weight: 100; 
      text-align: left; 
      /*padding: 7px;*/ 
     } 

     .EventLogGrid tr:nth-child(odd) { 
      background-color: #EDEDEE; 
     } 

     .EventLogGrid tr:hover td { 
     } 

     .EventLogGrid body { 
      overflow-x: hidden; 
     } 
    </style> 
</head> 
<body> 
<table class="EventLogGrid dataTable" style="padding: 0px;"> 
    <tr> 
     <th>Event Type 
     </th> 

     <th>Event Description 
     </th> 
     <th>Revision 
     </th> 

     <th>Version 
     </th> 
     <th>Log By 
     </th> 

     <th>Log Date 
     </th> 
     <th>Organization Name 
     </th> 
     <th>Document Owner Organization 
     </th> 
    </tr> 

    @foreach (var item in Model.eventLogData) 
    { 
     <tr> 
      <td>@Html.DisplayFor(modelItem => item.EventType) 
      </td> 


      <td>@item.EventDescription 
      </td> 
      <td>@Html.DisplayFor(modelItem => item.Revision) 
      </td> 

      <td>@Html.DisplayFor(modelItem => item.DocVersion) 
      </td> 
      <td>@Html.DisplayFor(modelItem => item.LogBy) 
      </td> 
      <td>@Html.DisplayFor(modelItem => item.LogDate) 
      </td> 
      <td>@Html.DisplayFor(modelItem => item.OrganizationName) 
      </td> 
      <td>@Html.DisplayFor(modelItem => item.DocumetOwnerOrganizationName) 
      </td> 
     </tr> 
    } 
    </table> 
</body> 
</html>

出典

2017-04-18 09:41:30

@Kbあなたのコードを試しました。しかし、効果はありません:( – user7721524

しかし、これは私のIEでうまく動作します。 –

デパップやタブレットのようなワイドスクリーンにテーブルを表示したい場合は、あなたがあなたのテーブルに応答する場合

.EventLogGrid td {max-width: 5px}

、あなたがbootstrap.js知っていますthese way

出典

2017-04-18 10:03:23 Duannx

私はあなたのトリックを試しましたが、それは私にとってはうまくいきません。 –

plunkerのようなライブエディタでコードを投稿してください。あなたが使用しているブラウザは何ですか？ – Duannx

@Duannxあなたの答えはいくつかの列の幅を狭くしましたが、コンテンツの量が少なくても同じ幅で残っています。 – user7721524

ポップアップウィンドウ内にHTML5テーブルを合わせ、水平スクロールバーを外します

答えて

関連する問題