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中修复此问题？

这是小提琴的例子。用firefox和chrome检查一下 https://jsfiddle.net/udarazz/qhane23o/1/

Answer 1

请试试这个

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

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

3 个答案: