我试图嵌入jQuery-UI插件,通过拖放来调整表列的大小。
我得到了这个:
$("#table,#table table tr th,#table table tr td").resizable({
handles: 'e'
});
拖动是有效的,它正在改变大小,但在开始时,我在两个表列之间单击,并稍微移动鼠标,列宽度变得更大
我不知道如何解决这个问题……有什么想法吗?提前感谢
发布于 2019-04-19 02:56:13
根据您的示例代码,请考虑以下示例。
$(function() {
$("table").resizable();
$("table thead th").resizable({
handles: 'e'
});
});
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;
}
<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>
这允许用户调整标题的大小,并且通过表结构的代理来调整列的大小。
希望这能有所帮助。
https://stackoverflow.com/questions/55745031
复制相似问题