Discussion :

[ep31]

Bonjour,
je rencontre un problème sur un tableau HTML qui s'appuie sur une classe tableau de ma feuille de style.
En effet, je voudrais que les cellules ne se redimensionnent pas quand une cellule contient une chaine de caractères sans espaces et trop longue pour apparaître dans la cellule.

Voici la partie concernée de ma feuille de style :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
div.tableContainer {
	width: 814px;		/* table width will be 99% of this*/
	height: 450px; 		/* must be greater than tbody*/
	overflow-y: scroll;
	border: none;
	}
 
div.tableContainer table {
	width: 798px;		/*100% of container produces horiz. scroll in Mozilla*/
	border-left-color: White;
	border-left-style: solid;
	border-left-width: 1px;
	border-right-color: White;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-color: White;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	font-size: 13px;
	}
 
div.tableContainer table thead {
	width: 100%;		/*100% of container produces horiz. scroll in Mozilla*/
	border: none;
	}
 
div.tableContainer table thead tr	{
	position:relative; 
	top: expression(offsetParent.scrollTop); /*IE5+ only*/
	color: white;
	background-color: #409191;
	text-align: center;
	height: 23;
	padding-left: 5px;
	padding-right: 5px;
	}
 
div.tableContainer table tbody {
	width: 100%;		/*100% of container produces horiz. scroll in Mozilla*/
	border: none;
	}
 
div.tableContainer table>tbody	{  /* child selector syntax which IE6 and older do not support*/
	overflow: auto; 
	height: 427px;      /* 450 - 23 */
	overflow-x: hidden;
	}
 
div.tableContainer table tbody td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/

et mon code html :

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
 
	<TABLE id="tableDatasContainer" class="tablo" cellSpacing=1 cellPadding=0 width="100%" border=0>
 
	<!--- la ligne de titre--->	
	<thead> 
 
	<TR class=tabloEnteteColonne>
          <TH class=tabloEnteteColonneTriable width="10%">
        		<span class=tabloLibelleEnteteColonneTriable>...
        		</span></TH>
 
          <TH class=tabloEnteteColonneTriable width="20%"onmouseover="javascript:style.cursor='hand'" 
        		onmouseout="javascript:style.cursor='auto'" onclick="trierColonne( 'A');metEnSurbrillanceOuNonTout();">
        		<span class=tabloLibelleEnteteColonneTriable>...
          </span></TH>
          <TH class=tabloEnteteColonneTriable width="70%"onmouseover="javascript:style.cursor='hand'" 
        		onmouseout="javascript:style.cursor='auto'" onclick="trierColonne( 'D');metEnSurbrillanceOuNonTout();">
        		<span class=tabloLibelleEnteteColonneTriable>...        		</span></TH>
   		</TR>
 
	    </thead>
		<tbody>
		<TD><%=dossiers.get("NOM")%></TD>
		<TD><%=dossiers.get("RSOCIAL")%></TD>
		<TD><%=dossiers.get("SAISIE")%></TD>
</tbody>

Concrètement, lorsque le champ de la deuxième cellule RSOCIAL dépasse le quota des 20% de ma taille, les colonnes sont resizées automatiquement et je ne veux pas qu'elles le soient.
Est-ce que je peux paramétrer cela au niveau de ma css ou dois-je le faire au niveau HTML ? Et dans les 2 cas, comment m'y prendre ?

Merci

PS : j'ai déjà essayé au niveau des TD d'ajouter l'attribut width de mes TH mais cela ne change rien

[ep31]

Bon finalement, avec du text/css, un overflow-x hidden combiné avec une taille de cellule fixe, c'est passé