J'essaie de construire une disposition similaire à la suivante:
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
où le fond remplit l'espace de la rangée supérieure.
Si cela était une table réelle, je pourrais facilement accomplir ceci avec <td colspan="3">
, mais comme je crée simplement une table comme la mise en page , je ne peux pas utiliser les <table>
mots clés. Est-ce possible en utilisant CSS?
colspan
attributRéponses:
Il n'y a pas d'analogue CSS simple et élégant pour
colspan
.Les recherches sur ce problème donneront une variété de solutions qui incluent une multitude d'alternatives, y compris le positionnement absolu, le dimensionnement, ainsi qu'une variété similaire de mises en garde spécifiques au navigateur et aux circonstances. Lisez et prenez la meilleure décision éclairée possible en fonction de ce que vous trouvez.
la source
colspan
c'est le bon outil pour le travail. Ma réponse était à 75% juste et la vôtre a 100% raison. Vous devriez revenir à SO.Pour autant que je sache, il n'y a pas de colspan dans CSS, mais il y en aura
column-span
dans un avenir proche, mais comme il ne s'agit que d'un brouillon en CSS3, vous pouvez le vérifier ici . Quoi qu'il en soit, vous pouvez faire une solution de contournement en utilisantdiv
etspan
avec un affichage semblable à un tableau comme celui-ci.Ce serait le HTML:
Et ce serait le CSS:
La seule raison d'utiliser cette astuce est de tirer parti du
table-layout
comportement, je l'utilise beaucoup si le fait de définir la largeur de div et de span à un certain pourcentage ne remplissait pas pleinement nos exigences de conception.Mais si vous n'avez pas besoin de bénéficier de ce
table-layout
comportement, la réponse de Durilai vous conviendra assez.la source
.span { ...
cela devrait l'êtrespan { ...
.div
balises pour afficher des données tabulaires est aussi mauvais que d'utilisertable
s pour contrôler la mise en pageUne autre suggestion consiste à utiliser flexbox à la place des tableaux. C'est un "navigateur moderne" bien sûr, mais allez, c'est 2016;)
Au moins, cela pourrait être une solution alternative pour ceux qui recherchent une réponse à cela de nos jours, car le message d'origine datait de 2010.
Voici un excellent guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
la source
la source
Cela ne fait pas partie de la compétence de CSS.
colspan
décrit la structure du contenu de la page ou donne un sens aux données du tableau, qui est le travail de HTML.la source
Pour fournir une réponse à jour: La meilleure façon de le faire aujourd'hui est d'utiliser la disposition de la grille CSS comme ceci:
et le HTML
la source
Vous pourriez essayer d'utiliser un système de grille comme http://960.gs/
Votre code ressemblerait à ceci, en supposant que vous utilisez une mise en page "12 colonnes":
la source
Essayez d'ajouter
display: table-cell; width: 1%;
à votre élément de cellule de tableau.Afficher l'extrait de code
la source
J'ai eu un certain succès, même si cela dépend de quelques propriétés pour fonctionner:
table-layout: fixed
border-collapse: separate
et "largeurs" de cellules qui se divisent / s'étendent facilement, soit 4 x cellules de 25% de largeur:
https://jsfiddle.net/sfjw26rb/2/
En outre, appliquer display: table-header-group ou table-footer-group est un moyen pratique de déplacer des éléments de «ligne» vers le haut / bas du «tableau».
la source
si vous utilisez div et span, il occupera plus de taille de code lorsque la ligne du tableau de données est plus volumineuse. Ce code ci-dessous est vérifié dans tous les navigateurs
HTML:
CSS:
la source
http://www.quackit.com/css/css3/properties/css_column-span.cfm
la source
table-cell
étendue de plusieurs colonnes de table.column-span
sert à contrôler la disposition des colonnes. Ce qui vous permet de faire passer du texte sur plusieurs colonnes, comme le font les journaux.Si vous venez ici parce que vous devez activer ou désactiver l'
colspan
attribut (par exemple pour une mise en page mobile):Dupliquez les
<td>
s et ne montrez que ceux avec les souhaitscolspan
:la source
Les propriétés CSS "column-count", "column-gap" et "column-span" peuvent le faire d'une manière qui garde toutes les colonnes de la pseudo-table dans le même wrapper (le HTML reste agréable et soigné).
Les seules mises en garde sont que vous ne pouvez définir qu'une seule colonne ou toutes les colonnes, et que span-span ne fonctionne pas encore dans Firefox, donc quelques CSS supplémentaires sont nécessaires pour s'assurer qu'il s'affichera correctement. https://www.w3schools.com/css/css3_multiple_columns.asp
la source
Je suis venu ici car actuellement le bloc de table WordPress ne prend pas en charge le paramètre colspan et j'ai pensé que je le remplacerais en utilisant CSS. C'était ma solution, en supposant que les colonnes ont la même largeur:
la source
Vous pourriez toujours des
position:absolute;
choses et spécifier des largeurs. Ce n'est pas une façon très fluide de le faire, mais cela fonctionnerait.la source
J'ai créé ce violon:
http://jsfiddle.net/wo40ev18/3/
HTML
CSS
la source
Les classes Media Query peuvent être utilisées pour réaliser quelque chose de passable avec un balisage en double. Voici mon approche avec bootstrap:
colspan 1 pour mobile, colspan 5 pour les autres avec CSS faisant le travail.
la source