Posté(e) le 15 juillet 20159 a '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) le 15 juillet 20159 a 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.
Posté(e) le 15 juillet 20159 a Auteur 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 ...
Posté(e) le 15 juillet 20159 a Bah par rapport à l'élément qui l'englobe par exemple ( parent ). Bootstrap, bootstrap, bootstrap !
Posté(e) le 15 juillet 20159 a Auteur 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 ... Modifié le 15 juillet 20159 a par Arcy
Posté(e) le 15 juillet 20159 a 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.
Posté(e) le 16 juillet 20159 a 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) le 16 juillet 20159 a 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
Posté(e) le 16 juillet 20159 a Auteur 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.
Posté(e) le 16 juillet 20159 a Auteur Voufètechié Je vais faire la même chose avec bootstrap et voir quel code CSS il applique.
Posté(e) le 16 juillet 20159 a 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> Modifié le 16 juillet 20159 a par foetus
Posté(e) le 16 juillet 20159 a 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>
Posté(e) le 17 juillet 20159 a 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.
Posté(e) le 20 juillet 20159 a 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é le 20 juillet 20159 a par Dark Abaddon
Posté(e) le 20 juillet 20159 a 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) le 20 juillet 20159 a 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). Modifié le 20 juillet 20159 a par Arcy
Archivé
Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.