Jump to content

Largeur d'une colonne en HTML5

Arcy

Recommended Posts

Arcy Mentor

Arcy

Posted
Posted

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

Link to comment
Share on other sites
RinDman Compétent

RinDman

Posted
Posted

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.

Link to comment
Share on other sites
Arcy Mentor

Arcy

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Arcy Mentor

Arcy

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Arcy Mentor

Arcy

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Arcy Mentor

Arcy

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
foetus Vétéran

foetus

Posted
Posted

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>
Link to comment
Share on other sites
cadegenere Compétent

cadegenere

Posted
Posted

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>
Link to comment
Share on other sites
RinDman Compétent

RinDman

Posted
Posted

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.

Link to comment
Share on other sites
Ulfr Sarr Passionné

Ulfr Sarr

Posted
Posted

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...
Link to comment
Share on other sites
Arcy Mentor

Arcy

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
Arcy Mentor

Arcy

Posted
  • Author
Posted

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:

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...