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

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

使用::webkit-resizer伪装选择器设置缩放器的样式
使用:after psuedo元素隐藏＆＃39;调整器（并添加自定义光标）
使用:hover psuedo类仅在resize上添加:hover

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

（这只适用于Safari）

＆＃13;

th > div,
td > div {
    resize: horizontal;
    overflow: hidden;
    text-align: left;
}

td > div::-webkit-resizer {
    background-color: transparent;
}

＆＃13;

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

＆＃13;

2。作为一种更具跨浏览性的解决方案，我们可以隐藏＆＃39; :after psuedo元素后面的resizer图标。这里的想法是创建一个:after元素，它位于td > div元素的右下角（在缩放器图标的顶部），背景颜色与表格单元格背景颜色相匹配。唯一剩下的变化是在单元格的右侧添加少量填充，因此:after伪元素也不会覆盖单元格内容。

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

像这样：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

3。如果我们希望单元格可以调整大小，隐藏resize元素，并明确表示元素可调整大小，我们可以使用:hover psuedo类。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

如果您想要从每个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>

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

2 个答案: