Arcy Posté(e) le 15 juillet 2015 Posté(e) le 15 juillet 2015 '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 :)
RinDman Posté(e) le 15 juillet 2015 Posté(e) le 15 juillet 2015 Salut, tu veux pas utiliser bootstrap ? XD Il permet d'oublier ces petits détails, ça remplie presque tout, aligne les choses correctement 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.
Arcy Posté(e) le 15 juillet 2015 Auteur Posté(e) le 15 juillet 2015 Bootstrap, c'est pour les faibles (en plus, j'ai bossé que sur la v2 ). 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 ...
RinDman Posté(e) le 15 juillet 2015 Posté(e) le 15 juillet 2015 Bah par rapport à l'élément qui l'englobe par exemple ( parent ). Bootstrap, bootstrap, bootstrap !
Arcy Posté(e) le 15 juillet 2015 Auteur Posté(e) le 15 juillet 2015 Et en CSS normal ? <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 ? < --------------------------------------- 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 ...
RinDman Posté(e) le 15 juillet 2015 Posté(e) le 15 juillet 2015 Dans ce cas, essaye du côté flex du CSS3 ( pas encore touché à ça vu que bootstrap lui aussi commence à l'expérimenter en l'intégrant dans le framework.
Arcy Posté(e) le 16 juillet 2015 Auteur Posté(e) le 16 juillet 2015 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 ...
Nemasix Posté(e) le 16 juillet 2015 Posté(e) le 16 juillet 2015 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
Arcy Posté(e) le 16 juillet 2015 Auteur Posté(e) le 16 juillet 2015 Justement, c'est ce que je veux pas 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.
Arcy Posté(e) le 16 juillet 2015 Auteur Posté(e) le 16 juillet 2015 Voufètechié Je vais faire la même chose avec bootstrap et voir quel code CSS il applique.
foetus Posté(e) le 16 juillet 2015 Posté(e) le 16 juillet 2015 En gros il faut faire comme cela, mais peut-être/ sûrement que cela ne marche pas partout [voire nulle part d'ailleurs ] <?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>
cadegenere Posté(e) le 16 juillet 2015 Posté(e) le 16 juillet 2015 Tu peux contourner le problème <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>
RinDman Posté(e) le 16 juillet 2015 Posté(e) le 16 juillet 2015 Ne réinventez pas la roue, bootstrap est là
Arcy Posté(e) le 16 juillet 2015 Auteur Posté(e) le 16 juillet 2015 Je peux réinventer la roue 4 fois si ça me permet d'apprendre
RinDman Posté(e) le 17 juillet 2015 Posté(e) le 17 juillet 2015 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 Tu peux aussi utiliser le table façon bootstrap, la dernière colonne prend l'espace restant également par défaut.
Ulfr Sarr Posté(e) le 20 juillet 2015 Posté(e) le 20 juillet 2015 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...
Arcy Posté(e) le 20 juillet 2015 Auteur Posté(e) le 20 juillet 2015 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.
Arcy Posté(e) le 20 juillet 2015 Auteur Posté(e) le 20 juillet 2015 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).
Messages recommandés
Archivé
Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.