在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>

我希望每一列都可以调整大小，因此我添加了一些CSS代码:

我希望每一列都可以调整大小，因此我添加了一些CSS代码：

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

所有功能都正常，每一列都可以水平调整大小。问题是在每个<th>中都有一个调整大小的图标。我想要隐藏它。有没有什么方法可以做到这一点？

- Genjik

---

尝试使用 th > div, td > div - 您当前的选择器是所有 td 内的所有 th 和所有 div。或者，如果您不想让 th div 可调整大小，只需从选择器中删除 th 即可。 - Pete

那是调整大小图标还是其他按钮？ - bhansa

这是浏览器添加的调整大小图标。您也可以在文本区域中看到这样的图标。 - Genjik

但是，如果您使一个元素可调整大小，它需要该图标来显示它是可调整大小的以及在哪里拖动，否则用户怎么知道它是可调整大小的呢？ - Pete

@Genjik - 我已经添加了一个解决方案，覆盖了你更多的要求 - 即所有单元格都是可调整大小的，当右边框悬停时还有自定义光标。 - Brett DeWoody

Answer 1

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

1. 使用 ::webkit-resizer 伪选择器来样式化 resizer
2. 使用一个 :after 伪元素来“隐藏” resizer (并添加自定义光标)
3. 使用 :hover 伪类在 :hover 上添加 resize

---

1. 这不符合跨浏览器兼容性，但对您可能有效 - 使用 ::-webkit-resizer 选择器。这允许对 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>

- Brett DeWoody

---

是的，现在你添加了光标，它运行良好，我正在尝试使用你覆盖的空间。 - Pete

它在没有自定义光标的情况下就可以工作，只是不太明显可以这样做。 - Brett DeWoody

第三个解决方案非常不错！ - Vaxo Basilidze

Answer 2

如果您想从每个中删除图标，只需使用 div选择器。 请参见下面的示例：

如果您想玩调整大小图标：这里

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>

- bhansa