Aller au contenu

Largeur d'une colonne en HTML5


Arcy

Messages recommandés

'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 :)

Lien vers le commentaire
Partager sur d’autres sites

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 ...

Lien vers le commentaire
Partager sur d’autres sites

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 ...

Lien vers le commentaire
Partager sur d’autres sites

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 ...

Lien vers le commentaire
Partager sur d’autres sites

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>
Lien vers le commentaire
Partager sur d’autres sites

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>
Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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...
Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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:

Lien vers le commentaire
Partager sur d’autres sites

Archivé

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

×
×
  • Créer...