Below are three potential solutions:
- To customize the resizer, utilize the
::webkit-resizer pseudo-selector.
- Create a custom cursor and hide the resizer by using a
:after pseudo-element.
- Add resizing functionality only when hovering over an element by applying the
:hover pseudo-class.
1. Although not universally supported, consider using the ::-webkit-resizer selector for basic stylization control. To make the resizer transparent in Safari, apply the following CSS:
(Note: This method is exclusive to 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. For a more cross-browser compatible solution, conceal the resizer icon with a :after pseudo-element. The approach involves positioning an :after element at the bottom-right corner of td > div elements to cover the resizer icon. This method also allows adding a customized cursor on hover like so:
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 you prefer making cells resizable while hiding the resizer and signaling their adjustability, use the :hover pseudo-class. It's advisable to combine both :hover and :active pseudo-classes to prevent losing the handle during fast cursor movements as demonstrated below:
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>