부트 스트랩 버튼 드롭 다운 - 오버플로 만들기

Question

테이블의 마지막 열에 "작업"드롭 다운을 만들려고하지만 드롭 다운을 클릭하면 오버플로가 나타납니다.

<table id="app_progress" class="table table-striped"> 
        <thead> 
        <tr> 
         <th>Name</th> 
         <th>In Build</th> 
         <th>Signed off</th> 
         <th>In deployment Apple</th> 
         <th>In deployment Android</th> 
         <th>In review Apple</th> 
         <th>In review Android</th> 
         <th>Live Apple</th> 
         <th>Live Android</th> 
         <th>Paid</th> 
         <th>Actions</th> 
        </tr> 
        </thead> 
        <tbody> 
        <!--for loop here that will create a TR all content in the TD based on whats passed in.--> 

        <tr> 
         <!--td>523</td--> 
         <td><a href="#" class="view-form-a">Primary</a></td> 
         <!-- in_build column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- signed_off column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- in_deployment_apple column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- in_deployment_android column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- in_review_apple column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- in_review_android column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- live_apple column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- live_android column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- paid column --> 
                      <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 
                     <!-- view app column --> 
         <td> 
          <div class="btn-group open"> 
           <button aria-expanded="true" data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle" type="button"> 
            Action <span class="caret"></span> 
           </button> 
           <ul role="menu" class="dropdown-menu"> 
            <li><a href="#">Action</a></li> 
            <li><a href="#">Another action</a></li> 
            <li><a href="#">Something else here</a></li> 
            <li class="divider"></li> 
            <li><a href="#">Separated link</a></li> 
           </ul> 
          </div> 
         </td> 
        </tr> 
        <!--End of If statement--> 

        <tr> 
         <!--td>99786</td--> 
         <td><a href="#" class="view-form-a">Primary School</a></td> 
         <!-- in_build column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- signed_off column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- in_deployment_apple column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- in_deployment_android column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- in_review_apple column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- in_review_android column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- live_apple column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- live_android column --> 
                <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 

         <!-- paid column --> 
                      <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td> 
                     <!-- view app column --> 
         <td> 
          <div class="btn-group"> 
           <button aria-expanded="false" data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle" type="button"> 
            Action <span class="caret"></span> 
           </button> 
           <ul role="menu" class="dropdown-menu"> 
            <li><a href="#">Action</a></li> 
            <li><a href="#">Another action</a></li> 
            <li><a href="#">Something else here</a></li> 
            <li class="divider"></li> 
            <li><a href="#">Separated link</a></li> 
           </ul> 
          </div> 
         </td> 
        </tr> 
        <!--End of If statement--> 
        <!--everything goes within the loop--> 
        </tbody> 
       </table> 

가 어떻게이 오버 플로우를 제거 할 수 있습니다 다음과 같이 내 HTML의 구조

(첨부 스크린 샷 참조)?

감사

Answer 1

는 ul.dropdown-menu에 dropdown-menu-right 클래스를 추가하고 따라서 왼쪽으로 확대하고, 버튼의 오른쪽으로 정렬됩니다.

Answer 2

$('.mydropdown').on('shown.bs.dropdown', function(e) { 
 
    var myBtn = $(this); 
 
    var offset_t = $(this).offset().top - $(window).scrollTop(); 
 
    var offset_l = $(this).offset().left - $(window).scrollLeft(); 
 

 
    console.log(offset_l, offset_t); 
 
    myBtn.find(".dropdown-menu").css({ 
 
    "position": "fixed", 
 
    "left": offset_l, 
 
    "top": offset_t + myBtn.height() 
 
    }); 
 
}); 
 
$('.mydropdown').on('hidden.bs.dropdown', function() { 
 
    var myBtn = $(this); 
 
    myBtn.find(".dropdown-menu").removeAttr("style"); 
 
}); 
 

 

 
$("#wrap").on("scroll", function(e) { 
 
    var myBtn = $('.mydropdown.open'); 
 

 
    var offset_t = $(myBtn).offset().top - $(window).scrollTop(); 
 
    var offset_l = $(myBtn).offset().left - $(window).scrollLeft(); 
 

 
    myBtn.find(".dropdown-menu").css({ 
 
    "position": "fixed", 
 
    "left": offset_l, 
 
    "top": offset_t + myBtn.height() 
 
    }); 
 

 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<div style="width:850px; overflow: scroll;height:450px;" id="wrap"> 
 
    <table class="table table-striped table-bordered table-hover" id="example" ccellpadding="0" cellspacing="0" border="0" width="100%"> 
 
    <thead> 
 
     <tr> 
 
     <th>Head1</th> 
 
     <th>Head2</th> 
 
     <th>Head3</th> 
 
     <th>Head4</th> 
 
     <th>Head5</th> 
 
     <th>Head6</th> 
 
     <th>Head7</th> 
 
     <th>Head8</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr height="48px"> 
 
     <td>1</td> 
 
     <td>Gabriel</td> 
 
     <td>Some value is here</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td>Some value is here and little longer</td> 
 
     <td> 
 
      <div class="btn-group mydropdown"> 
 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
 
       <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li> 
 
       <a href="link/1" title="View SPK"> 
 
        <span class="glyphicon glyphicon-check"></span> View SPK</a> 
 
       </li> 
 
       <li> 
 
       <a href="link/1" title="Edit SPK"> 
 
        <span class="glyphicon glyphicon-edit"></span> Edit SPK</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

오버플 : 스크롤 - 오버플 잘린 않고, 스크롤 바는 콘텐츠의 나머지 부분을 참조하기 위해 추가된다.

오버플로가 필요한 경우 스크롤 필수입니다. jquery를 사용하여 드롭 다운 메뉴에 고정 된 위치를 추가했습니다.