在 CSS 中隐藏调整大小手柄图标

Question

例如我有某种 table:

<table>
    <tr>
        <th><div>Title1</div></th>
        <th><div>Title2</div></th>
    </tr>

    <tr>
        <td><div>Body1</div></td>
        <td><div>Body2</div></td>
    <tr>
</table>

我希望每个 th 列都可以调整大小，所以我添加了一些 CSS:

th > div {
    resize: horizontal;
    overflow: hidden;
}

一切正常，每一列都可以水平调整大小。问题是在每个 <th> 中我都有一个用于调整大小的图标。我想让它隐藏起来。有办法吗？

Answer 1

如果您想从每个 td 中删除图标，只需使用 th > div 选择器。

参见下面的示例：

如果你想玩那个调整大小的图标：Here

th > div{
    resize: horizontal;
    overflow: hidden;
}

<table>
    <tr>
        <th><div>Title1</div></th>
        <th><div>Title2</div></th>
    </tr>

    <tr>
        <td><div>Body1</div></td>
        <td><div>Body2</div></td>
    <tr>
</table>

Answer 2

以下是三种可能的解决方案：

使用 ::webkit-resizer 伪选择器设置缩放器的样式
将 :after 伪元素用于 'hide' 缩放器（并添加自定义光标）
使用 :hover 伪 class 仅在 :hover

resize

1. 它不兼容跨浏览器，但可能适合您 - ::-webkit-resizer 选择器。这允许对调整器图标的样式进行一些基本控制。我们可以通过以下方式使其透明：

（这仅适用于 Safari）

th > div,
td > div {
    resize: horizontal;
    overflow: hidden;
    text-align: left;
}

td > div::-webkit-resizer {
    background-color: transparent;
}

<strong>The `::-webkit-resizer` selector only works in Safari</strong>

<br/><br/>

<table>
    <tr>
        <th><div>Title1</div></th>
        <th><div>Title2</div></th>
    </tr>

    <tr>
        <td><div>Body1</div></td>
        <td><div>Body2</div></td>
    <tr>
</table>

2. 作为一个更跨浏览器的解决方案，我们可以 'hide' 一个 :after 伪元素后面的缩放器图标。这里的想法是创建一个 :after 元素，它位于 td > div 元素的右下角（在调整大小图标的顶部），其背景颜色与 table 单元格相匹配背景颜色。唯一剩下的变化是在单元格的右侧添加少量填充，这样 :after 伪元素也不会覆盖单元格内容。

此选项的主要优点是我们可以添加您提到的您想要的自定义光标。使用 td > div:hover:after 选择器，当可调整大小的 table 单元格的右侧位于 :hover 上时，我们可以应用光标。像这样：

像这样：

th > div,
td > div {
  resize: horizontal;
  overflow: hidden;
  text-align: left;
  position: relative;
  padding: 0 8px 0 0;
  min-width: 45px;
}

td > div:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0px;
  right: 0px;
  background-color: white;
  width: 8px;
  height: 100%;
}

td > div:hover:after {
  cursor: col-resize;
}

<table>
  <tr>
    <th>
      <div>Title1</div>
    </th>
    <th>
      <div>Title2</div>
    </th>
  </tr>

  <tr>
    <td>
      <div>Body1</div>
    </td>
    <td>
      <div>Body2</div>
    </td>
    <tr>
</table>

3. 如果我们希望单元格可以调整大小，隐藏调整大小的元素，并且让元素明显可以调整大小，我们可以使用:hover psuedo class。

通过一些实验，我发现如果同时使用 :hover 和 :active 伪 classes，此解决方案效果最佳，或者如果拖动光标，则调整大小的句柄会丢失太快了。

th > div {
    resize: horizontal;
    overflow: hidden;
    text-align: left;
}

td > div {
    padding-right: 10px;
    min-width: 40px;
}

td > div:hover,
td > div:active {
    resize: horizontal;
    overflow: hidden;
}

<strong>The `::-webkit-resizer` selector only works in Safari</strong>

<br/><br/>

<table>
    <tr>
        <th><div>Title1</div></th>
        <th><div>Title2</div></th>
    </tr>

    <tr>
        <td><div>Body1</div></td>
        <td><div>Body2</div></td>
    <tr>
</table>

在 CSS 中隐藏调整大小手柄图标

Hiding resize handle icon in CSS

css

resize

html-table

responsive