Hiding resize handle icon in CSS

Question

For example I have some kind of 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>

I want every th column be resizeable, so I add some CSS:

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

Everything working fine, every column can be resized horizontally. Problem is that in every <th> I have an icon for resizing. I want it to be hidden. Is there anyway to do this?

Answer 1

Here are three possible solutions:

1. Use the ::webkit-resizer psuedo selector to style the resizer
2. Use a :after psuedo element to 'hide' the resizer (and add a custom cursor)
3. Use the :hover psuedo class to add the resize only on :hover

---

1. It's not cross-browser compliant, but might work for you - the ::-webkit-resizer selector. This allows some basic control over the styling of the resizer icon. We can make it transparent with the following:

(this will only work in 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. As a more cross-browser solution, we can 'hide' the resizer icon behind a :after psuedo element. The idea here is to create an :after element that sits in the bottom-right corner of the td > div elements (on top of the resizer icon) with a background color that matches the table cell background color. The only remaining change is to add a small amount of padding to the right-side of the cells so the :after psuedo element doesn't also cover the cell contents.

The main advantage of this option is we can add the custom cursor you mentioned you wanted. Using the td > div:hover:after selector we can apply a cursor when the right-side of the resizable table cells is on :hover. Like this:

Like this:

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. If we want the cells to be resizable, hide the resize element, and make it obvious the elements are resizable, we can use the :hover psuedo class.

Through some experimenting I found this solution works best if you use both :hover and :active pseudo classes, or the handle on the resize is lost if the cursor is dragged too quickly.

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>