passen Sie die HTML5-Tabelle im Popup-Fenster und entfernen Sie die horizontale Bildlaufleiste

Ich hatte versucht, die Größe der Tabelle innerhalb der Pop-up-Container Größe zu beheben, konnte aber nicht erreichen, auch nach Prüfung so viele Lösungen. Außerdem konnte der Text nicht in eine feste Größe der Zelle eingefügt werden. Ich sehe eine lange horizontale Bildlaufleiste. Könnte jemand helfen.passen Sie die HTML5-Tabelle im Popup-Fenster und entfernen Sie die horizontale Bildlaufleiste

Unten ist mein Code:

$(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>

Quelle

2017-04-18 user7721524

Haben Sie über bootstrap.js wissen? Wenn Sie das wissen, können Sie bootstrap.js verwenden, um den horizontalen Bildlauf zu entfernen. –

Fügen Sie einfach drei Links zu Ihrem Kopf-Tag und gelten 'Datatable' Klasse Sie Tabelle, die horizontale Bildlauf entfernen wird

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

Quelle

2017-04-18 09:41:30

@Kb Ich habe es mit deinem Code versucht. aber keine Wirkung :( – user7721524

aber das funktioniert gut in meinem IE. –

Wenn Sie nur Ihre Tabelle in einem breiten Bildschirm wie Destop oder Tablet zeigen möchten. Genau dies tun:

.EventLogGrid td {max-width: 5px}

Wenn Sie Ihren Tisch wollen reagiert, sollten Sie versuchen, these way

Quelle

2017-04-18 10:03:23 Duannx

Ich habe Ihren Trick versucht, aber das funktioniert nicht für mich. –

Könnten Sie bitte Ihren Code in einem Live-Editor wie Plunker, so dass ich Ihnen leichter helfen kann ? Und welchen Browser benutzen Sie? – Duannx

@Duannx Ihre Antwort reduziert die Breite für ein paar Spalten, aber einige bleiben gleich breit, auch wenn der Inhalt weniger ist. Danke trotzdem – user7721524

passen Sie die HTML5-Tabelle im Popup-Fenster und entfernen Sie die horizontale Bildlaufleiste

Antwort

Verwandte Themen