オーバーフロー-xとオーバーフロー-yがクロム

Question

で正しく動作していない私は、CSSコードの下に使用して、細胞内の余分なテキストを非表示にするには、共通のテーブルを作った

.table td{ 
    display: table-cell; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    max-width: 250px; 
    width: inherit; 
    overflow-y: hidden; 
    overflow-x: visible; 
} 

のHTMLコード

<table class="table table-striped table-bordered table-hover"> 
            <thead> 
             <tr> 
              <th> # </th> 
              <th>Name</th> 
              <th class="hidden-xs">Code</th> 
              <th>Category</th> 
              <th class="hidden-xs">Location</th> 
              <th>More</th> 
             </tr> 
            </thead> 
            <tbody> 
             <tr role="row" class="odd"> 
              <td>21</td> 
              <td class="sorting_1">XXXXXXXX</td> 
              <td>00000000</td> 
              <td>xxxxxxxxxx</td> 
              <td>No: xx/x</td> 
              <td> 
               <div align="center"> 
                <div class="btn-group"> 
                 <a class="btn btn-xs btn-blue dropdown-toggle btn-sm" data-toggle="dropdown" href="#"> 
                  <i class="fa fa-cog"></i> 
                  <span class="caret"></span> 
                 </a> 
                 <ul role="menu" class="dropdown-menu pull-right"> 
                  <li role="presentation"> 
                   <a role="menuitem" tabindex="-1" href="../asset/edit?id=57"> 
                    <i class="fa fa-edit"></i> Edit 
                   </a> 
                  </li> 
                  <li role="presentation"> 
                   <a data-toggle="modal" role="menuitem" tabindex="-1" href="#model57"> 
                    <i class="fa fa-times"></i> Remove 
                   </a> 
                  </li> 
                 </ul> 
                </div> 
               </div> 
              </td> 
             </tr> 
            </tbody> 
           </table> 

あり各テーブルのセル内のボタンで、ボタンをクリックするとドロップダウンが表示されます。

上記のコードのドロップダウンはfirefoxでは正しく機能しますが、chromeでは以下のようなドロップダウンメニューが表示されません。

すべてのテーブルで共通のコードを作成する必要があります。 Chromeでこの問題を解決するにはどうすればよいですか？

ここでは例があります。 firefoxとchromeで確認してください https://jsfiddle.net/udarazz/qhane23o/1/

Answer 1

確認するようにコードを入力してください。この

$(".btn-group").parent().parent("td").addClass("drp_menu");

.table td{ 
 
    display: table-cell; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    max-width: 250px; 
 
    width: inherit; 
 
    overflow-y: hidden; 
 
    overflow-x: visible; 
 
} 
 
td.drp_menu { 
 
    overflow: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<table class="table table-striped table-bordered table-hover"> 
 
    <thead> 
 
     <tr> 
 
     <th> # </th> 
 
      <th>Name</th> 
 
      <th >Code</th> 
 
      <th>Category</th> 
 
      <th >Location</th> 
 
      <th>More</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr role="row" class="odd"> 
 
      <td>21</td> 
 
      <td class="sorting_1">XXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td> 
 
      <td>00000000</td> 
 
      <td>xxxxxxxxxx</td> 
 
      <td>No: xx/x</td> 
 
      <td> 
 
       <div align="center"> 
 
        <div class="btn-group"> 
 
         <a class="btn btn-xs btn-blue dropdown-toggle btn-sm" data-toggle="dropdown" href="#"> 
 
          <i class="fa fa-cog"></i> 
 
          <span class="caret"></span> 
 
         </a> 
 
         <ul role="menu" class="dropdown-menu pull-right"> 
 
          <li role="presentation"> 
 
           <a role="menuitem" tabindex="-1" href="../asset/edit?id=57"> 
 
            <i class="fa fa-edit"></i> Edit 
 
           </a> 
 
          </li> 
 
          <li role="presentation"> 
 
           <a data-toggle="modal" role="menuitem" tabindex="-1" href="#model57"> 
 
            <i class="fa fa-times"></i> Remove 
 
           </a> 
 
          </li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

メニューでblockを設定しようとするとどうなりますか？

UPD：

.table td ul.dropdown-menu.pull-right{ 
    display:block; 

} 

UPD3： https://codepen.io/Leo240/pen/Jymqrz

Answer 3

このスタイルを使用しUPD2私はないTDの問題を見ることができるようにそれでul.dropdown-menu.pull-right

と表の最後の欄に

table tr td:last-child { 
    text-overflow: initial; 
    overflow-y: visible; 
    overflow-x: visible; 
}