在彈出窗口中合適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？如果你知道，那麼你可以使用bootstrap.js來移除水平滾動。 –

只需添加三個鏈接到你的頭標記，並應用 '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}

如果你希望你的表是有求必應，你應該嘗試these way

來源

2017-04-18 10:03:23 Duannx

我試過你的伎倆，但這對我不起作用。 –

你可以請你的代碼在一個現場編輯器像掠奪者，這樣我可以幫助你更輕鬆？你用什麼瀏覽器？ – Duannx

@Duannx你的答案減少了幾列的寬度，但是即使內容較少，但仍有一些寬度仍然是相同的寬度。無論如何感謝你 – user7721524

在彈出窗口中合適HTML5表並刪除水平滾動條

回答

相關問題