我面临问题引导表响应

Question

我的引导表响应出现问题。

我在这里尝试过一些代码https://codepen.io/arindamx01/pen/gJOqxK，我需要显示完整的工具提示。我尝试了不使用.table-responsive类的情况。没有表响应类，它会很好地工作，我的意思是我可以通过按时徘徊来查看工具提示。但是当我添加.table-responsive时，看不到全部工具提示。该表中出现长滚动条，我该怎么办...请帮助。我期望的是

Answer 1

将跟随CSS从array1 = [{value : 'xyz' , label : 'xyz'} , {value : 'pqr' , label :'pqr'} , {value : 'abc' , label :'abc'} ] array2 = [{value : 'xyz' , label : 'xyz'} , {value : 'pqr' , label :'pqr'}] 更改为relative

absolute

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

Answer 2

您只需使用引导程序 .table-responsive{-sm|-md|-lg|-xl} breakpoint specific：

Answer 3

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

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

Answer 4

“问题” （请注意引号）是，通过在包装器<div>中使用overflow来更改其默认的<div class="table-responsive">行为。 因此，当您的工具提示出现时，它会在您的overflow: visible;包装器中 trap 。 要解决此问题，只需为其设置tooltip。

关于可能的影响，那么您将失去在移动设备上水平滚动的能力，在这种情况下，您可以编写媒体查询来恢复移动设备上的功能，因为无论如何您都不需要在移动设备上使用df_A = df[df['sector']=='A'] df_B = df[df['sector']=='B'] df_C = df[df['sector']=='C']

Image for uploaded file

Answer 5

尝试这些解决方案

方法1：

.tooltipItem_dist{
  position: absolute;
}

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

使用绝对定位时要记住的重要一件事是确保它不会过度使用，否则会导致维护噩梦。

方法2：

.table-responsive{
  overflow: visible;
}

我将使用方法2。

Answer 6

您是否尝试添加元视口？

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

Answer 7

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