时间戳

首页 > 解决方案 > 如何将 TD 内的 div DIV 增加为大于 TD

css - 如何将 TD 内的 div DIV 增加为大于 TD

问题描述

我有一个带有 div 和一个输入字段的表格列（vue.js，但这不应该是相关的）。当输入字段获得焦点时，我希望包含我的输入字段的 DIV 被放大，以便它溢出表格的各个部分。
当我写“溢出”时，我（必然）不是指 CSS 中的“溢出”属性，而是指 DIV 溢出表的一部分的效果。
我也希望表结构保持不变。也就是说，其他 TD 和 TR 的列宽和行高必须保持不变。

也许设想一个没有输入字段的解决方案会更容易，而只是对悬停事件做出反应的 DIV。

<table class="my-table">
    <tr>
        <td><div>THIS SHOULD BE ENLARGED ON FOCUS OR HOVER 300px x 200px</div></td>
        <td><div>some other data</div></td>
        <td><div>some other data</div></td>
    </tr>
</table>

我只是在寻找解决方案的 CSS 部分。事件处理正常。

此外，解决方案不是增加 TD 的宽度或 TR 的高度

标签： css

解决方案

不确定这是否是您要查找的内容，但您可以使用transform: scale将内容放大到超出其范围，放大也不会造成溢出。但是，无法将其设置为我知道使用 CSS 的特定像素量。

但是，您可以控制元素的大小（以像素为单位）并使用比例放大该数量。因此，如果您的元素是 200px 宽并且您缩放 1.5，它将是 300px 宽。如果它是 50 像素高，您可以将 y 轴缩放 4 以获得 200 像素，尽管这会使容器中的内容倾斜以适应其边界。

document.querySelectorAll('.target').forEach(el => {
  el.addEventListener('mouseover', function(e) {
    console.log(e.target.clientWidth * 1.5 + 'px', e.target.clientHeight * 4 + 'px')
  })
})
.my-table tr {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.my-table td:nth-of-type(1),
.my-table td:nth-of-type(4) {
  background-color: lightgreen;
}

.my-table .doube-scale {
  height: 50px;
  width: 200px;
  overflow: visible;
}

.my-table .doube-scale:hover {
  transform: scale(1.5, 4);
  transform-origin: top left;
  background: rgba(0, 0, 0, 0.2)
}

.single-scale:hover {
  transform: scale(1.5);
  transform-origin: top left;
}
<table class="my-table">
  <tr>
    <td>
      <div class="doube-scale target">THIS SHOULD BE ENLARGED ON FOCUS OR HOVER 300px x 200px</div>
    </td>
    <td>
      <div>some other data</div>
    </td>
    <td>
      <div>some other data</div>
    </td>
    <td>
      <!-- This element will not be the size you want however, it will not skew the
      content as the aspect ratio will be the same regardless of the scale amount -->
      <div class="single-scale target">THIS SHOULD BE ENLARGED ON FOCUS OR HOVER</div>
    </td>
  </tr>
</table>

推荐阅读