28112 sujets

CSS et mise en forme, CSS3

Empêcher une cellule d'agir sur la largeur d'un tableau

Bonjour,

Je pense qu'il n'y a pas de solution mais je pose la question.

Prenons un bon tableau à l'ancienne dont aucune dimension n'est définie.
C'est donc le contenu qui va créer la dimension.
Mais je veux qu'une cellule n'agisse pas sur la largeur.

Par exemple, ce tableau à deux lignes et trois colonnes :

<table>
<tr><td>Un</td><td>Deux</td><td>Trois</td></tr>
<tr><td colspan="3">Je veux que cette foutue phrase trop longue n'agisse pas que le largeur du tableau et qu'elle se répande en hauteur</td></tr>
</table>


Si voua avez une idée merci d'avance.
Modifié par boteha_2 (29 Apr 2017 - 22:07)
boteha_2 a écrit :
Bonjour,

Je pense qu'il n'y a pas de solution mais je pose la question.

Prenons un bon tableau à l'ancienne dont aucune dimension n'est définie.
C'est donc le contenu qui va créer la dimension.
Mais je veux qu'une cellule n'agisse pas sur la largeur.

Par exemple, ce tableau à deux lignes et trois colonnes :

<table>
<tr><td>Un</td><td>Deux</td><td>Trois</td></tr>
<tr><td colspan="3">Je veux que cette foutue phrase trop longue n'agisse pas que le largeur du tableau et qu'elle se répande en hauteur</td></tr>
<table>


Si voua avez une idée merci d'avance.

En fixant un style "max-width" avec une valeur fixe, la cellule ne devrait pas dépasser cette largeur...
<table>
  <tr>
    <td>Un</td>
      <td>Deux</td>
      <td>Trois</td>
    </tr>
    <tr>
      <td colspan="3" style="max-width:20rem;">Je veux que cette foutue phrase trop longue n'agisse pas que le largeur du tableau et qu'elle se répande en hauteur</td>
    </tr>
</table>

Par ailleurs, la balise table doit être correctement fermée... ce qui n'est pas le cas dans le code initial.
Modérateur
peut-etre e donnant une petite largeur a cette cellule ?

Comme c'est du tableau, elle devrait se compresser sur la largeur maximale du reste du tableau ...
[colspan="3"] {
  width: 1px;/* 0 ça marche aussi ... [smile] sinon n'importe quelle taille supérieur pourra servir de largeur minimale au tableau  */
}

https://codepen.io/gc-nomade/pen/oWjvPq
Modifié par gcyrillus (17 Apr 2017 - 20:44)
Bonjour,

Merci de ta réponse, l'alerte par mail n'a pas fonctionné, c'est pourquoi je n'ai pas répondu plus tôt.

Je n'aime pas ce genre de code où tu trompes le navigateur, mais cela semble marcher.
En espérant que certains navigateurs n'appliquent pas 1px en vrai...

On pourrait espérer pour display des valeurs spéciales :

Display: n'affecte-pas-largeur
Display: n'affecte-pas-hauteur
Modérateur
Tu ne trompes pas le navigateur, c'est l'une des particularités des tableaux qui s'adaptent à leur contenu . Il n'y a que la largeur que tu peut forcer en statique avec 
table-layout:fixed;
, pour la hauteur rien n’empêchera un tableau de s’étendre par son contenu.

height et width sont à appréhender comme min-height et min-width. Le 1px ou 0px sont ici provocateurs et laissent tout de suite voir que la cellule grandi bien.

La largeur que tu donnera à cette cellule sera la largeur minimale de ton tableau s'il est vide de contenu, donc un min-width Smiley cligne


Cdt,
GC

en https://www.w3.org/wiki/CSS/Properties/table-layout

fr https://developer.mozilla.org/fr/docs/Web/CSS/table-layout
Modifié par gcyrillus (24 Apr 2017 - 15:46)
Merci gcyrillus,

"cyrillus" a écrit :

La largeur que tu donnera à cette cellule sera la largeur minimale de ton tableau s'il est vide de contenu, donc un min-width


C'est très intéressant.
Modifié par boteha_2 (25 Apr 2017 - 22:10)
Sujet clos
Aller à