Aller au contenu

Largeur d'une colonne en HTML5

Featured Replies

Posté(e)

'soir !

 

Voilà, j'ai un tableau avec 3 colonnes.

Les 2 premières colonnes sont déjà remplis (elles sont donc à la largeur du contenu) et je souhaiterai que la 3ème colonne récupère l'espace restant.

 

Si j'applique un width: 100%, mes 2 premières colonnes ne respecte plus la largeur du contenu.

L'idéal serait d'appliquer une largeur fixe mais je souhaiterai m'en dispenser si possible.

 

Etant donné qu'on peut effectuer un calcul en CSS (avec calc()), pas possible de faire quelque chose du genre :

.td3 {width: calc(body.width - (.td1.width + .td2.width))}

?

 

Inpactiemment :)

Posté(e)

Salut, tu veux pas utiliser bootstrap ? XD Il permet d'oublier ces petits détails, ça remplie presque tout, aligne les choses correctement :D

 

Ce qu'on peut faire, c'est de mettre un id ou une classe sur cette colonne particulière et changer les propriétés CSS.

Posté(e)
  • Auteur

Bootstrap, c'est pour les faibles (en plus, j'ai bossé que sur la v2 :p).

 

Plus sérieusement, j'apprends également à mieux utiliser CSS, d'où l'absence de framework ou truc de ce genre.

Sinon pour l'id/classe, je veux bien mais il faut savoir quoi mettre comme propriété pour que cette 3ème colonne prenne le reste ...

Posté(e)
  • Auteur

Et en CSS normal ? :p

<table>    <tbody>        <tr>            <td>                14 Juillet            </td>            <td>                Prise de la Bastille            </td>            <td>                (révolution française)            </td>        </tr>    </tbody></table>

Actuellement, j'ai ça en résultat :

< --------------------------------------- largeur de la page -------------------------------------->[            ][                      ][                        ][ 14 Juillet ][ Prise de la Bastille ][ (révolution française) ]

C'est pourtant pas si compliqué d'obtenir ça, non ? :dd:

< --------------------------------------- largeur de la page -------------------------------------->[            ][                      ][                                                            ][ 14 Juillet ][ Prise de la Bastille ][ (révolution française)                                     ]

J'ai essayé le width: 100% sur la 3ème colonne, ça prend la largeur de la page ...

Modifié par Arcy

Posté(e)
  • Auteur

Bon, j'ai fait quelques essais avec Flexbox.

Le principe est pas mal mais semble ne pas répondre à mon problème, la dernière colonne n'occupe toujours pas l'espace disponible ...

 

Je vais voir pour passer tout ça en DIV, ça va faire tâche par rapport aux autres tableaux ...

Posté(e)

Ton table doit avoir width 100%, tes deux premières td doivent être avec un width défini et ta troisème td doit être en auto et ça devrait passer :transpi:

Posté(e)
  • Auteur

Justement, c'est ce que je veux pas :p

Je veux que les 2 premières colonnes s'adaptent au contenu (comportement normal) et que la 3ème prend toute la place restante.

Mettre width: 100% à la table ou à tbody réparti l'espace aux cellules.

Posté(e)
  • Auteur

Voufètechié :dd:

 

Je vais faire la même chose avec bootstrap et voir quel code CSS il applique.

Posté(e)

En gros il faut faire comme cela, mais peut-être/ sûrement que cela ne marche pas partout [voire nulle part d'ailleurs :dd: ]

<?xml version='1.0' encoding='UTF-8' ?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'><html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'><head>  <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />  <title>3 columns</title>  <meta name='description' content='3 columns' />   <style type='text/css'>  #main_content {    width:  100%;    height: 650px;    background-color: yellow;  }  #div_right {    width: 200px;    height: 100%;    float: left;    background-color: red;  }  #div_left {    margin-left: 230px;    height: 100%;    background-color: blue;  }  #div_right_right {    width:   50%;    height: 100%;    float: left;    background-color: green;  }  #div_right_left {    width:   50%;    height: 100%;    float: left;    background-color: purple;  }  #div_clear {    width:  0px;    height: 0px;    clear: both;  }  .text_div {    width:  100%;    height: 100%;    text-align: center;    line-height: 650px; /* <- vertical align */    vertical-align: middle;  }  </style></head><body>  <div id='main_content'>    <div id='div_right'>      <div id='div_right_right'>        <div class='text_div'>totototo</div>      </div>      <div id='div_right_left'>        <div class='text_div'>tatatata</div>      </div>    </div>    <div id='div_left'>      <div class='text_div'>fgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdgfgfgfdg</div>    </div>    <div id='div_clear'></div>  </div></body></html>

Modifié par foetus

Posté(e)

Tu peux contourner le problème :troll:

 

<table style="width: 100%; border:1px solid black;">    <tbody>        <tr>            <td style="border:1px solid black;">                14 Juillet            </td>            <td  style="border:1px solid black;">                Prise de la Bastille            </td>            <td style="width:100%; border:1px solid black;">                (révolution française)            </td>        </tr>    </tbody></table>
Posté(e)

Bah pour bootstrap, met bien le css et js non compressé, sinon t'auras pas les précieux commentaires :)

 

En gros, tu veux 3 colonnes, soit col-4 fois trois ( 12 étant le max ) ! Pour utiliser un maximum d'espace tu devras utiliser ."container-fluid" comme classe, voilà le début après faut faire des ajustements :fumer:

 

Tu peux aussi utiliser le table façon bootstrap, la dernière colonne prend l'espace restant également par défaut.

Posté(e)

Et ça?

<body style="width:100%;margin:0;padding:0;border:1px solid red">	<table style="position:relative;width:100%;border:1px solid black">		<tbody>			<tr>				<td style="white-space: nowrap;border:1px solid black">					14 Juillet				</td>				<td style="white-space: nowrap;border:1px solid black">					Prise de la Bastille				</td>				<td style="width:99%;border:1px solid black">					(révolution française)				</td>			</tr>		</tbody>	</table></body> 
Les margin, padding, border, c'est juste pour l'aspect visuel bien sûr...

Modifié par Dark Abaddon

Posté(e)
  • Auteur

J'y ai bien réfléchi et si ce que je compte faire fonctionne bien pour une navigation classique, pour le mobile ça pourrait poser problème ...

Je regarde donc pour une autre solution mais je garde quand même vos infos sous le coude, au cas où je conserverai ma position.

Posté(e)
  • Auteur

J'ai finalement abandonné le principe du tableau pour ce que je voulais faire.

 

Si l'idée était intéressante, elle devenait complètement irréalisable dans un contexte mobile.

J'ai choisi des boites flottantes pour mes idées, compatible aussi bien avec le format standard que mobile grâce à FLEX !

 

Merci à tous pour vos aides (et votre lobbying intensif concernant bootstrap, je l'utilise toujours pas ! MWAHAHAHAHAHA).

 

:inpactitude:

Modifié par Arcy

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.