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

Question

例如我有某种表格：

<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

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

1. 使用::webkit-resizer伪选择器设置调整器的样式
2. 使用:after伪元素“隐藏”调整器（并添加自定义光标）
3. 使用:hover伪类添加resize唯一的:hover

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.作为一种更跨浏览器的解决方案，我们可以“隐藏”在:after伪元素后面的缩放器图标。这里的想法是创建一个:after位于td > div元素右下角（在调整器图标顶部）的元素，其背景颜色与表格单元格背景颜色相匹配。唯一剩下的变化是在单元格的右侧添加少量填充，这样:after伪元素就不会覆盖单元格内容。

此选项的主要优点是我们可以添加您提到的自定义光标。使用td > div:hover:after选择器，我们可以在可调整大小的表格单元格的右侧打开时应用光标: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.如果我们希望单元格可以调整大小，隐藏resize元素，并让元素可以调整大小，我们可以使用:hoverpsuedo类。

通过一些实验，我发现如果同时使用伪类:hover和:active伪类，这个解决方案效果最好，或者如果光标拖得太快，调整大小的句柄就会丢失。

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>