HTML 表 : overflow hidden for horizontal scroll then blocks tooltip from showing outside of table

标签 html css html-table

TL;DR:由于溢出:隐藏，无法在表格中正确定位和显示工具提示。

我创建了一个简单的可重现的表格示例，其工具提示未按预期显示。该问题存在的部分原因是表格需要 overflow:scroll 才能使表格的水平滚动按预期工作。这是一个例子:

.gap {
  height: 50px
}

div.table { 
  max-width: 200px;

  overflow: scroll;
  border: 2px solid blue;
  display: inline-block;
  font-family: 'Roboto Mono';
  font-weight: 700;
}

.tr {
  display:flex;
}

.td, .th {
  border: 1px solid black;
  min-width: 60px;
  height: 50px;
}

.th {
  position: relative;
  font-size: 13px;
  padding: 2px;
  background-color: #888888;
  text-align: center;
  border-right: 1px solid #555555;
  display: inline-block;
  box-sizing: border-box;
}

.tip-wrapper {
  position: absolute;
}

.tip0 {
  visibility: hidden;
  position: absolute;
  top: -60%;
  z-index: 1;
  max-width: 325px;
  min-width: 160px;
  color: #333333;
  text-align: left;
  background: white;
  border: 1px solid black;
}

.tip1 {
  visibility: hidden;
  position: fixed;
  z-index: 1;
  max-width: 325px;
  min-width: 160px;
  color: #333333;
  text-align: left;
  background: white;
  border: 1px solid black;
}

.tooltip:hover .tip0, .tooltip:hover .tip1 {
  visibility: visible;
}
<div class='gap'>.</div>
<div class='table'>
  <div class='table-headers'>
    <div class='tr'>
      <div class='th tooltip'>
        Z
        <div class='tip0'>
          Heres the ToolTip For Column Z, getting cut off (bad)
        </div>
      </div>
      <div class='th'>Y</div>
      <div class='th tooltip'>
        X
        <div class='tip-wrapper'>
          <div class='tip1'>
            Heres the Tooltip For Column X, which doesn't stay at the top (bad)
          </div>
        </div>
      </div>
      <div class='th'>W</div>
      <div class='th'>V</div>
    </div>
  </div>
  <div class='table-body'>
    <div class='tr'>
    </div>
    <div class='tr'>
      <div class='td stick'>A</div>
      <div class='td'>B</div>
      <div class='td'>C</div>
      <div class='td'>D</div>
      <div class='td'>E</div>
    </div>
    <div class='tr'>
      <div class='td'>F</div>
      <div class='td'>G</div>
      <div class='td'>H</div>
      <div class='td'>I</div>
      <div class='td'>J</div>
    </div>
    <div class='tr'>
      <div class='td'>F</div>
      <div class='td'>G</div>
      <div class='td'>H</div>
      <div class='td'>I</div>
      <div class='td'>J</div>
    </div>
    <div class='tr'>
      <div class='td'>F</div>
      <div class='td'>G</div>
      <div class='td'>H</div>
      <div class='td'>I</div>
      <div class='td'>J</div>
    </div>
    <div class='tr'>
      <div class='td'>F</div>
      <div class='td'>G</div>
      <div class='td'>H</div>
      <div class='td'>I</div>
      <div class='td'>J</div>
    </div>
    <div class='tr'>
      <div class='td'>F</div>
      <div class='td'>G</div>
      <div class='td'>H</div>
      <div class='td'>I</div>
      <div class='td'>J</div>
    </div>
  </div>
</div>

但是，在上表中，Z 和 X 标题单元格上显示了工具提示。但是，目前这两个工具提示都存在问题:

Z 列:由于overflow:hidden，此工具提示被切断。表格可以水平滚动非常重要，因此我无法删除此 overflow CSS 属性。不过，工具提示悬停在表格顶部上方也很重要，以免遮挡表格内容。

X 列:我从 this other post 尝试过这种方法。方法 1。这允许工具提示位于 overflow:hidden 之外。但是，当我垂直滚动该表格时，工具提示也会移动，这不好。工具提示应始终保持相同的高度，位于表格顶部上方。

我希望这个基本的“表格标题内的工具提示”能够起作用，但到目前为止还没有。因此，我正在考虑在表格的 HTML 之外创建一个单独的工具提示 div，并使用 onMouseOver() 和 onMouseOut() 处理函数将工具提示放置在鼠标位置，并用文本填充工具提示。也许这是我唯一的方法？

最佳答案

如果您添加此元素并设置 top，则 tip0 上缺少 .tip-wrapper 元素> 使用 calc() 将 .tip-wrapper 的位置设置为 -(th height) - (以 rem 为单位的顶部阈值) 在这种情况下 calc(-50px - 1.5rem) 那么问题就解决了，您可以将工具提示放置在表格顶部。

您可以在th高度中使用动态单位，例如vh、vmax、%。 此外，您还需要一些 @media 查询来微调工具提示的位置。

.td,
.th {
  border: 1px solid black;
  min-width: 10%;
  height: 5vh;
}
.tip-wrapper {
  position: absolute;
  top: calc(-5vh - 1.5rem);
}


.gap {
  height: 100px
}

div.table {
  max-width: 200px;
  overflow: scroll;
  border: 2px solid blue;
  display: inline-block;
  font-family: 'Roboto Mono';
  font-weight: 700;
}

.tr {
  display: flex;
}

.td,
.th {
  border: 1px solid black;
  min-width: 60px;
  height: 50px;
}

.th {
  position: relative;
  font-size: 13px;
  padding: 2px;
  background-color: #888888;
  text-align: center;
  border-right: 1px solid #555555;
  display: inline-block;
  box-sizing: border-box;
}

.tip-wrapper {
  position: absolute;
  top: calc(-50px - 1.5rem);
}

.tip0 {
  visibility: hidden;
  position: fixed;
  z-index: 1;
  max-width: 325px;
  min-width: 160px;
  color: #333333;
  text-align: left;
  background: white;
  border: 1px solid black;
}

.tip1 {
  visibility: hidden;
  position: fixed;
  z-index: 1;
  max-width: 325px;
  min-width: 160px;
  color: #333333;
  text-align: left;
  background: white;
  border: 1px solid black;
}

.tooltip:hover .tip0,
.tooltip:hover .tip1 {
  visibility: visible;
}
<div class='gap'>Gap</div>
<div class='table'>
  <div class='table-headers'>
    <div class='tr'>
      <div class='th tooltip'>
        Z
        <div class='tip-wrapper'>
          <div class='tip0'>
            Tip For Column Z is a long tip with enough text to overflow above the page top
          </div>
        </div>
      </div>
      <div class='th'>Y</div>
      <div class='th tooltip'>
        X
        <div class='tip-wrapper'>
          <div class='tip1'>
            Tip For Column Z is a long tip with enough text to overflow above the page top
          </div>
        </div>
      </div>
      <div class='th'>W</div>
      <div class='th'>V</div>
    </div>
  </div>
  <div class='table-body'>
    <div class='tr'>
    </div>
    <div class='tr'>
      <div class='td stick'>A</div>
      <div class='td'>B</div>
      <div class='td'>C</div>
      <div class='td'>D</div>
      <div class='td'>E</div>
    </div>
    <div class='tr'>
      <div class='td'>F</div>
      <div class='td'>G</div>
      <div class='td'>H</div>
      <div class='td'>I</div>
      <div class='td'>J</div>
    </div>
    <div class='tr'>
      <div class='td'>F</div>
      <div class='td'>G</div>
      <div class='td'>H</div>
      <div class='td'>I</div>
      <div class='td'>J</div>
    </div>
    <div class='tr'>
      <div class='td'>F</div>
      <div class='td'>G</div>
      <div class='td'>H</div>
      <div class='td'>I</div>
      <div class='td'>J</div>
    </div>
    <div class='tr'>
      <div class='td'>F</div>
      <div class='td'>G</div>
      <div class='td'>H</div>
      <div class='td'>I</div>
      <div class='td'>J</div>
    </div>
    <div class='tr'>
      <div class='td'>F</div>
      <div class='td'>G</div>
      <div class='td'>H</div>
      <div class='td'>I</div>
      <div class='td'>J</div>
    </div>
  </div>
</div>

关于HTML 表 : overflow hidden for horizontal scroll then blocks tooltip from showing outside of table，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62781047/

上一篇：Ruby 可重复使用的 map block

下一篇：javascript - 我可以更改 django-filters 的日期时间本地格式吗？

相关文章：

html - 为什么要使用表格来构建布局？

javascript - 使用 javascript 单击刚刚打开的页面上的链接

html - 文本超出容器的问题( Bootstrap )

css - 显示图像和文本相互内联

javascript - jQuery 平滑滚动链接颜色更改不起作用

php - 我可以将 html 表格制作成图像以嵌入到 pdf 中吗

javascript - 固定标题的滚动表中的粘性副标题

javascript - 新添加的元素 $.each 和 events

javascript - jquery 动画不透明箭头 mouseenter mouseleave

html - 省略号溢出会破坏 flex 的 child 尺寸

©2024 IT工具网  联系我们