溢出 - 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; 
}