Redimensionnement d'une balise td

**Lenaick** · 02/12/2008, 11h09

Bonjour à tous,

j'ai un petit problème lorsque je charge ma page, je voudrais que les colonnes de mon tableau se redimensionne. Mais je ne vois pas comment faire. j'ai fait une fonction en javascript mais je ne vois pas ou la mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function resize_display(nbBoite)
{
	var largeur_colonne=0;
	largeur_colonne=(screen.width-100)/nbBoite;
        return largeur_colonne;
}

là je récupère la largeur que devrait faire ma colonne.
Enfin!!!
Si quelqu'un pouvait m'éclairer un petit peu ca m'arrangerai.
Merci d'avance!!!

**E.Bzz** · 02/12/2008, 11h20

Bonjour,
su tu as un <thead>, il faut appliquer ta largeur à la colonne à ce niveau.
Si tu n'en as pas (implicitement uniquement un <tbody>), il faut l'appliquer au <td> du 1° <tr> : il sera répercuté sur les suivants.

A+

**marcha** · 02/12/2008, 11h21

Salut,

Tu peux appliquer un style css width aux cellules de la première ligne
de ton tableau.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
largeur_colonne=Math.round((screen.width-100)/nbBoite);
var table = document.getElementById('id_de_ta_table');
var firstrow = table.getElementsByTagName('tr')[0];
var cells = firstrow.getElementsByTagName('td');
for(var i=0;i<cells.length;i++) {
  cells[i].style.width = largeur_colonne + 'px';
}

**Lenaick** · 02/12/2008, 11h23

oki, merci! Mais comment j'appelle ma fonction dans ma balise <td>???

**franculo_caoulene** · 02/12/2008, 11h23

Salut,

Voilà l'idée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
   <title>Test</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   * {margin:0;padding:0;}
   body {background:#000;color:#fff;}
   #col1 {width:200px;background:#333;}
   #col2 {width:200px;background:#666;}
   </style>
</head>
<body> 	
   <table>
      <col id="col1" />
      <col id="col2" />
      <tr>
         <td>ligne 1, colonne 1</td>
         <td>ligne 1, colonne 2</td>
      </tr>
      <tr>
         <td>ligne 2, colonne 1</td>
         <td>ligne 2, colonne 2</td>
      </tr>
   </table>
   <script type="text/javascript">
      document.getElementById("col1").style.width = "300px";
      document.getElementById("col2").style.width = "150px";
   </script>
</body>
</html>

edit: oulà! j'arrive longtemps après la bataille. Pourquoi personne n'utilise <col>?

**Lenaick** · 02/12/2008, 12h06

oki franchement c'est cool toutes les réponses que vous m'apportez, mon problème étant que je ne sais pas comment appeler ma fonction dans ma balise TD.

**E.Bzz** · 02/12/2008, 12h10

Envoyé par Lenaick

oki franchement c'est cool toutes les réponses que vous m'apportez, mon problème étant que je ne sais pas comment appeler ma fonction dans ma balise TD.

Pourquoi veux-tu l'appeler "dans ta balise <td>" ??

Il suffit d'exécuter la fonction : regarde l'exemple de franculo_caoulene ...

Perso, j'aurais plutôt fait une fonction à appeler dans le onload du <body>.

A+

Redimensionnement d'une balise td

JavaScript

Discussions similaires

Partager

Partager