防止Bootstrap .table-responsive样式裁剪提示框。

Question

防止Bootstrap .table-responsive样式裁剪提示框。

javascripthtmlcsstwitter-bootstrap-3responsive-design

3

我在使用Bootstrap的table-responsive样式时遇到了一些问题。

我尝试了一些代码 https://codepen.io/arindamx01/pen/gJOqxK 来使完整的工具提示可见。我尝试了不加.table-responsive类的情况。不加.table-responsive类时它能够正常工作：当我将鼠标悬停在时间上时，我可以看到工具提示。但是当我添加.table-responsive时，我无法看到完整的工具提示。工具提示被裁剪在底部，并且表格右侧出现了一个长的滚动条。

期望的显示效果:

- Arindam Sarkar

1

什么弹出窗口？你能添加更多细节吗？ - Learning

抱歉，我犯了一个错误，这是一个工具提示，请将鼠标悬停在时间部分。 - Arindam Sarkar

检查一下我的答案，现在它可以工作了。 - Learning

为什么这个问题被踩了？有人能告诉我吗？ - Arindam Sarkar

7个回答

2

你可以简单地使用bootstrap .table-responsive{-sm|-md|-lg|-xl} 响应式表格，根据不同的屏幕尺寸进行调整。最初的回答。

- fmsthird

我已经知道了，但是我需要根据那个工作在自定义CSS中添加一些东西。 - Arindam Sarkar

嗯...我认为这是最好的方法，因为您正在使用Bootstrap，如果您想要额外的定制，可以创建另一个自定义类并将其附加到元素的类中。 - fmsthird

1

“问题”（注意引号）是，在您的包装器

中使用.table-responsive会更改其默认的溢出行为。因此，当您的工具提示出现时，它将被困在您的

包装器中。要解决这个问题，只需将其设置为overflow: visible;即可。

关于可能的影响，您将失去在移动设备上水平滚动的能力，在这种情况下，您可以编写媒体查询以恢复移动设备上的功能，因为您在移动设备上不需要工具提示。

https://codepen.io/jose-guzman-ojeda/pen/wbvZEp

- guzmanoj

0

请查看以下解决方案并相应地更新您的CSS。

.table-responsive { overflow-x: visible }
@media screen and (max-width: 767px) { 
.table-responsive { overflow-y: visible }
}

- Rohit Verma

0

尝试这些解决方案

方法1：

.tooltipItem_dist{
  position: absolute;
}

它将与HTML元素（页面本身）直接相关。

在使用绝对定位时需要牢记的重要事项是确保不要过度使用，否则会导致维护成本极高的问题。

方法2：

.table-responsive{
  overflow: visible;
}

我会选择第二种方法。

- Ashique Ansari

-1

你是否尝试过添加视口元标记？

<meta name="viewport" content= "width=device-width, initial-scale=1.0">

- Untara Vivi Chahya

是的，我已经添加了。请查看当我使用响应式表格时我的工具提示是否隐藏。 - Arindam Sarkar

-1

.tooltipItem_dist:hover .tooltipItem {
    visibility: visible;
    opacity: 1;
}
.tooltipItem_dist{
  position: relative;
}
.tooltipItem_dist .tooltipItem {  
    top: 100%;
}
.tooltipItem {
  color: #fff;
    position: absolute;
    top: calc(100% - 30px);
    width: 160px;
    background: #333;
    z-index: 1;
    text-align: center;
    padding: 10px;
    border-radius: 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    left: 50%;
    transform: translate(-50% , 0);
    -moz-transform: translate(-50% , 0);
    -webkit-transform: translate(-50% , 0);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

<div class="table table-striped table-bordered dt-responsive nowrap">
              <table class="table table-hover noMargin arUinqueteable">
                <thead>
                  <tr>
                    <th>POS</th>
                    <th>NAME</th>
                    <th>AV PACE</th>
                    <th>TIME</th>
                    <th>&nbsp;</th>
                    <th>&nbsp;</th>
                  </tr>
                </thead>
                <tbody class="results_section">  
                   <tr class="resultTotalTr "> <!--log_user_active-->
                        <td class="blue">1</td>
                        <td class="blue">Subha Dev <!--1--><!--Limpopo--></td>
                        <td class="blue">00:07:23</td>
                        <td class="black tooltipItem_dist">04:04:04
                        <div class="tooltipItem">
                            <ul>
                                <li><span>SWIM</span>  04:23:04</li>
                                <li><span>T1</span> sdfsdf</li>
                                <li><span>BIKE</span></li>
                                <li><span>T2</span></li>
                                <li><span>RUN</span></li>
                                <li><span>TOTAL</span></li>
                            </ul>
                        </div>
                        </td>
                        <td><!--<span>PB</span>--></td>
                        <td><!--<i class="fa fa-check-circle-o"></i>--></td>
                  </tr>
                                                                                                      
                 
                   <tr class="resultTotalTr "> <!--log_user_active-->
                        <td class="blue">2</td>
                        <td class="blue">Subha Dev <!--1--><!--Limpopo--></td>
                        <td class="blue">00:09:43</td>
                        <td class="black tooltipItem_dist">05:21:01
                        <div class="tooltipItem">
                            <ul>
                                <li><span>SWIM</span>  04:23:04</li>
                                <li><span>T1</span> sdfsdf</li>
                                <li><span>BIKE</span></li>
                                <li><span>T2</span></li>
                                <li><span>RUN</span></li>
                                <li><span>TOTAL</span></li>
                            </ul>
                        </div>
                        </td>
                        <td><!--<span>PB</span>--></td>
                        <td><!--<i class="fa fa-check-circle-o"></i>--></td>
                  </tr>
                                                                                                      
                 
                   <tr class="resultTotalTr "> <!--log_user_active-->
                        <td class="blue">3</td>
                        <td class="blue">Subha Dev <!--1--><!--Limpopo--></td>
                        <td class="blue">00:18:56</td>
                        <td class="black tooltipItem_dist">10:25:01
                        <div class="tooltipItem">
                            <ul>
                                <li><span>SWIM</span>  04:23:04</li>
                                <li><span>T1</span> sdfsdf</li>
                                <li><span>BIKE</span></li>
                                <li><span>T2</span></li>
                                <li><span>RUN</span></li>
                                <li><span>TOTAL</span></li>
                            </ul>
                        </div>
                        </td>
                        <td><!--<span>PB</span>--></td>
                        <td><!--<i class="fa fa-check-circle-o"></i>--></td>
                  </tr>
                  
                  
                </tbody>
              </table>
              
                          </div>

- Anil Kumar Moharana

修改答案后，在 CodePen 中运行相同的代码，它将按照您的要求工作。在 StackOverflow 控制台中它显示滚动条，但在那里不会显示。只需尝试上述解决方案即可。 - Anil Kumar Moharana

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Learning · Accepted Answer

将以下css从relative更改为absolute

.tooltipItem_dist {
    position: absolute;
}

https://codepen.io/kashmiriguide/pen/gJOyjW