css - 在 CSS 中隐藏调整大小 handle 图标

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 伪选择器来设置resizer的样式
2. 使用 :after 伪元素“隐藏”缩放器(并添加自定义光标)
3. 使用 :hover 伪类仅在 :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. 作为一种更跨浏览器的解决方案，我们可以将调整大小图标“隐藏”在 :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. 如果我们希望单元格可调整大小，隐藏调整大小的元素，并使元素可调整大小明显，我们可以使用 :hover 伪类.

通过一些实验，我发现如果同时使用 :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>