溢出 - 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中它隱藏了下面的下拉菜單。

我需要爲每個表格中的工作制作一個通用的css代碼。我如何解決這個問題在鉻？

這裏是小提琴的例子。檢查它與Firefox和鉻 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

如果試圖設置z-index爲block與菜單？

UPD：我所看到的問題不是TD，但與ul.dropdown-menu.pull-right它

UPD2：

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

} 

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

Answer 3

使用這種風格爲表格的最後一列。

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