web-dev-qa-db-fra.com

Comment rendre les colonnes de table html redimensionnables?

J'ai un style bootstrap assez standard <table>. Je souhaite rendre les colonnes de ce tableau redimensionnables, par exemple en cliquant et en faisant glisser la bordure droite de <th> élément. Je ne peux pas utiliser de plugins jQuery car j'utilise Angular et la dépendance jQuery n'est pas acceptable.

Je pensais que si je pouvais attraper l'événement click/mousemove sur la bordure droite de <th> élément, je pourrais implémenter ma propre logique de redimensionnement (surveiller le mouvement horizontal de la souris et ajuster la largeur en conséquence), mais je ne sais pas comment cela peut être fait (il n'y a rien de tel qu'un événement lié à la bordure de l'élément pour autant que je sache) ).

Quelle est la meilleure façon de rendre les colonnes redimensionnables par l'utilisateur? Sans jQuery (et de préférence - dans Angular 2).

javascripthtmlcsshtml5angular
19
Titan

La propriété resize ne fonctionne pas avec la table. C'est pourquoi vous devez mettre un div à l'intérieur du tableau th et td, puis le redimensionner.

Essayez l'extrait ci-dessous

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;
}
<table>
  <tr>
    <td><div>one</div></td>
    <td><div>two</div></td>
    <td><div>three</div></td>
  </tr>
  <tr>
    <td><div>four</div></td>
    <td><div>five</div></td>
    <td><div>six</div></td>        
  </tr>
  <tr>
    <td><div>seven</div></td>
    <td><div>eight</div></td>
    <td><div>nine</div></td>       
  </tr>   
</table>
32
Jishnu V S