当前位置:  开发笔记 > 编程语言 > 正文

如何使html表列可调整大小?

如何解决《如何使html表列可调整大小?》经验,为你挑选了1个好方法。

我有一个相当标准的bootstrap风格

.我想使这个表的列可以调整大小,例如通过单击并拖动
元素的右边框.我不能使用任何jQuery插件,因为我使用Angular并且jQuery依赖是不可接受的.

我想如果我可以在

元素的右边界上捕捉click/mousemove事件,我可以实现我自己的调整大小逻辑(监视水平鼠标移动并相应地调整宽度),但我不知道如何做到这一点(据我所知,没有与元素边界相关的事件.

使用户可以调整列的最佳方法是什么?没有jQuery(最好是在Angular 2上下文中).



1> Jishnu V S..:

resize属性不适用于表.这就是为什么你需要把一个div表内thtd,然后调整其大小.

试试下面的代码片段

table {
  border-collapse: collapse;
  border-spacing: 0px;
}
td {
  border: 2px solid black;
  padding: 0;
  margin: 0px;
  overflow: auto;
}

div {
  resize: both;
  overflow: auto;
  width: 120px;
  height: 120px;
  margin: 0px;
  padding: 0px;
  border: 1px solid black;
  display:block;

}

td div {
  border: 0;
  width: auto;
  height: auto;
  min-height: 20px;
  min-width: 20px;
}
one
two
three
four
five
six
seven
eight
nine
推荐阅读
乐韵答题
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有