Hiding resize handle icon in CSS - 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:
Use the ::webkit-resizer psuedo selector to style the resizer
Use a :after psuedo element to 'hide' the resizer (and add a custom cursor)
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>

Answer 2

If you want to remove the icon from each and every td just use th > div selector.
See the example below:
If you want to play with that resize icon: 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>