隐藏可调整大小的div中的“调整大小”句柄?

There are a few other questions which are similar, but none works or seems in the right area. I'm trying to make a table's columns' widths resizable. My table is a normal HTML table, except that it has the Bootstrap 4 class table (maybe they could have thought of a different name...!).

我的CSS看起来像这样:

.resizable-div {
  resize: horizontal;
  overflow: auto;
  margin: 0px;
  padding: 0px;
  border: 1px solid black;
  display:block;
  min-width: 100px;
  min-height: 30px;
}

我在其中将单元格添加到表行中并带有可调整大小的div的JS的相关位,其中的文本是这样的:

row.appendChild(cell);
const resizableTdDiv = document.createElement( 'div' );
resizableTdDiv.classList.add( 'resizable-div');
cell.appendChild( resizableTdDiv );
const cellTextNode = document.createTextNode(isHeader ? fieldName : value);
resizableTdDiv.appendChild(cellTextNode);

结果工作正常:可调整大小的列。欢呼。美中不足的只有一只苍蝇:

enter image description here

我当然可以摆脱国界。我只想失去右下角那些讨厌的处理程序三角形...全部!

我意识到必须给用户一个想法,就是他们可以调整列的大小...但是,如果我可以用100%透明的三角形图标代替这些三角形图标,我将非常乐意以其他方式做到这一点。

评论