首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >调整表列大小出错

调整表列大小出错
EN

Stack Overflow用户
提问于 2019-04-18 19:26:50
回答 1查看 148关注 0票数 0

我试图嵌入jQuery-UI插件,通过拖放来调整表列的大小。

我得到了这个:

代码语言:javascript
复制
$("#table,#table table tr th,#table table tr td").resizable({
     handles: 'e'
});

拖动是有效的,它正在改变大小,但在开始时,我在两个表列之间单击,并稍微移动鼠标,列宽度变得更大

我不知道如何解决这个问题……有什么想法吗?提前感谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-19 02:56:13

根据您的示例代码,请考虑以下示例。

代码语言:javascript
复制
$(function() {
  $("table").resizable();
  $("table thead th").resizable({
    handles: 'e'
  });
});
代码语言:javascript
复制
table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

table th {
  background: #CCC;
  width: 120px;
  min-width: 2em;
}

table thead tr .ui-resizable-e {
  border: 1px solid black;
  width: 2px;
  height: 17px;
  background: #666;
  top: 1px;
  right: -2px;
}
代码语言:javascript
复制
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<table>
  <thead>
    <tr>
      <th>H1</th>
      <th>H2</th>
      <th>H3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
    </tr>
  </tbody>
</table>

这允许用户调整标题的大小,并且通过表结构的代理来调整列的大小。

希望这能有所帮助。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55745031

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档