colResizable est une bonne solution, mais elle ne prend pas en charge les largeurs de colonnes initiales. Dès que la bibliothèque est démarrée, les largeurs de colonnes initiales sont modifiées. Post a fourni une sorte de solution mais son code source n'est pas similaire à colResizable (au moins le dernier). Les commentaires sont décourageants et le lien github est rompu.Colonnes de table redimensionnables avec jQuery ou autres bibliothèques Javascript
D'autres solutions sont des bibliothèques sans aide ni échantillon.
Existe-t-il un autre plugin ou même un extrait disponible pour modifier la largeur des colonnes? la conservation des largeurs initiales est obligatoire. "div" ne sont pas applicables; ça doit être une table.
Mise à jour:
Je trouve l'extrait de code suivant sur codepen.io:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Styles/jquery-ui-1.9.2.custom.css" />
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<style>
body {
font-family: Arial;
font-size: 10pt;
}
table#demo-table th {
background-color: #006;
color: #fff;
}
table#demo-table th,
table#demo-table td {
white-space: nowrap;
padding: 3px 6px;
}
table.cellpadding-0 td {
padding: 0;
}
table.cellspacing-0 {
border-spacing: 0;
border-collapse: collapse;
}
table.bordered th,
table.bordered td {
border: 1px solid #ccc;
border-right: none;
text-align: center;
}
table.bordered th:last,
table.bordered td:last {
border-right: 1px solid #ccc;
}
</style>
</head>
<body>
<table id="demo-table" class="bordered cellpadding-0 cellspacing-0">
<thead>
<tr>
<th id='column-header-1'>Column Header 1<div id='column-header-1-sizer'></div></th>
<th id='column-header-2'>Column Header 2<div id='column-header-2-sizer'></div></th>
<th id='column-header-3'>Column Header 3<div id='column-header-3-sizer'></div></th>
<th id='column-header-4'>Column Header 4<div id='column-header-4-sizer'></div></th>
<th id='column-header-5'>Column Header 5<div id='column-header-5-sizer'></div></th>
<th id='column-header-6'>Column Header 6<div id='column-header-6-sizer'></div></th>
<th id='column-header-7'>Column Header 7<div id='column-header-7-sizer'></div></th>
<th id='column-header-8'>Column Header 8<div id='column-header-8-sizer'></div></th>
<th id='column-header-9'>Column Header 9<div id='column-header-9-sizer'></div></th>
<th id='column-header-10'>Column Header 10<div id='column-header-10-sizer'></div></th>
<th id='column-header-11'>Column Header 11<div id='column-header-11-sizer'></div></th>
<th id='column-header-12'>Column Header 12<div id='column-header-12-sizer'></div></th>
<th id='column-header-13'>Column Header 13<div id='column-header-13-sizer'></div></th>
<th id='column-header-14'>Column Header 14<div id='column-header-14-sizer'></div></th>
<th id='column-header-15'>Column Header 15<div id='column-header-15-sizer'></div></th>
<th id='column-header-16'>Column Header 16<div id='column-header-16-sizer'></div></th>
<th id='column-header-17'>Column Header 17<div id='column-header-17-sizer'></div></th>
<th id='column-header-18'>Column Header 18<div id='column-header-18-sizer'></div></th>
<th id='column-header-19'>Column Header 19<div id='column-header-19-sizer'></div></th>
<th id='column-header-20'>Column Header 20<div id='column-header-20-sizer'></div></th>
<th id='column-header-21'>Column Header 21<div id='column-header-21-sizer'></div></th>
<th id='column-header-22'>Column Header 22<div id='column-header-22-sizer'></div></th>
<th id='column-header-23'>Column Header 23<div id='column-header-23-sizer'></div></th>
<th id='column-header-24'>Column Header 24<div id='column-header-24-sizer'></div></th>
<th id='column-header-25'>Column Header 25<div id='column-header-25-sizer'></div></th>
</tr>
</thead>
<tbody>
<td>My Data 1</td>
<td>My Data 2</td>
<td>My Data 3</td>
<td>My Data 4</td>
<td>My Data 5</td>
<td>My Data 6</td>
<td>My Data 7</td>
<td>My Data 8</td>
<td>My Data 9</td>
<td>My Data 10</td>
<td>My Data 11</td>
<td>My Data 12</td>
<td>My Data 13</td>
<td>My Data 14</td>
<td>My Data 15</td>
<td>My Data 16</td>
<td>My Data 17</td>
<td>My Data 18</td>
<td>My Data 19</td>
<td>My Data 20</td>
<td>My Data 21</td>
<td>My Data 22</td>
<td>My Data 23</td>
<td>My Data 24</td>
<td>My Data 25</td>
</tbody>
</table>
<script type="text/javascript">
$(function() {
var thHeight = $("table#demo-table th:first").height();
$("table#demo-table th").resizable({
handles: "e",
minHeight: thHeight,
maxHeight: thHeight,
minWidth: 40,
resize: function (event, ui) {
var sizerID = "#" + $(event.target).attr("id") + "-sizer";
$(sizerID).width(ui.size.width);
}
});
});
</script>
</body>
</html>
il utilise jquery.resizable et semble plus simple que d'autres widgets, mais a de nouveau problème avec la taille initiale: Vous pouvez définir min & largeurs maximales, mais pas une largeur prédéfinie fixe. La largeur initiale peut être définie, la colonne peut être élargie, mais pas serrée par rapport à la taille initiale.