jquery - overflow-x 和 overflow-y 在 chrome 中无法正常工作

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 代码。我如何在 Chrome 中解决这个问题？

这是 fiddle 的例子。用 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>