IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[HTML] taille de cellule fixe


Sujet :

Tableau en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    731
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 731
    Par défaut [HTML] taille de cellule fixe
    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

  2. #2
    Membre éclairé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    731
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 731
    Par défaut
    Bon finalement, avec du text/css, un overflow-x hidden combiné avec une taille de cellule fixe, c'est passé

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [CSS 2] Ajustement de la taille des cellules d'un tableau HTML
    Par malikoo dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 11/04/2011, 12h46
  2. Tabular+taille cellule fixée+contenu centré+mode math ?
    Par Platona dans le forum Tableaux - Graphiques - Images - Flottants
    Réponses: 5
    Dernier message: 05/10/2009, 21h38
  3. Tableau HTML taille fixe
    Par shuyun dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 28/08/2009, 15h35
  4. [HTML] Taille fixe de span
    Par vva dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 06/12/2007, 10h14
  5. Fixer la taille des cellules dans un tableau HTML ?
    Par bilou95 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 19/03/2007, 16h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo