팝업창에 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를 사용하여 가로 스크롤을 제거 할 수 있습니다. –

그냥 머리 태그에 세 개의 링크를 추가하고 적용 가로 스크롤을 제거하면 테이블 '데이터 테이블'클래스

<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 표를 맞추고 가로 스크롤 막대를 제거하십시오.

답변

관련 문제