28172 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai un tableau situé dans un div de largeur fixe en overflow:scroll.

Code HTML :


<div id="BodyContent">
  <div class="DIGridViewContainer ">
    <table>
      <tr>
        <td class="gridViewHeader"></td>
        <td class="gridViewHeader"></td>
        <td class="gridViewHeader"></td>
        <td class="gridViewHeader"></td>
      </tr>
    </table>
  </div>

  <div>
    //d'autres choses
  </div>
</div>


La classe CSS pour les éléments du header de mon tableau est la suivante :


.DIGridViewContainer .GridViewHeader
{
	background-image:url(../Images/DI-c.png);
	background-repeat:repeat-x;
	height:15px;
	float:left;
	font-family:Arial;
	font-size:10px;
	font-weight:bold;
	color:White;
	border-color:White;
	border-top-style:none;
	border-right-style:none;
	margin:0px;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:10px;
	padding-right:10px;
	white-space:nowrap;
}


CSS div conteneur :

#BodyContent
{
	position:absolute;
	left:190px;
	top:140px;
	width:810px;
	height:440px;
	overflow:scroll;
	padding-top:20px;
	padding-left:20px;
	padding-bottom:20px;
}


Sous IE mon tableau se limite à la largeur du div conteneur et mes libellés de colonnes sont sur plusieurs lignes quand ils sont longs. Or je veux que mes libellés de colonnes soient sur une seule ligne et que la largeur de mon tableau s'adapte à son contenu même si je dois avoir un scroll horizontal.

Y'a une solution ?
a écrit :
Or je veux que mes libellés de colonnes soient sur une seule ligne et que la largeur de mon tableau s'adapte à son contenu même si je dois avoir un scroll horizontal.


Le je veux que n'est pas trop de mise dans ce cas-là puisqu'il est tout de même préférable que le tableau s'étire en hauteur (comportement naturel dans le flux) plutôt qu'en largeur (comportement contraint et scroll horizontal peu naturel). Si un utilisateur agrandit les textes disons 3x, ton tableau fera 5 écrans de large ???? On a vu mieux question utilisabilité non ?
La fenêtre dans laquelle j'affiche mon tableau a une largeur fixe (810px).

Or mon tableau peut potentiellement contenir beaucoup de colonnes (20 +) donc il faut qu'il puisse s'élargir comme il veut en fonction de son contenu.