Tableau avec en-têtes fixes
Faire défiler un tableau sans les en-têtes.
Lorsqu'il s'agit d'afficher un grand tableau, le défilement de la page risque de faire disparaître les titres. Il sera alors difficile de se repérer entre les colonnes. Nous vous proposons ici quelques lignes de CSS pour formater le tableau, mais surtout pour permettre le défilement de la partie centrale uniquement. Autrement dit pour afficher le tableau comme ci-dessous.
Première solution.
Le principe est de fixer la hauteur du corps du tableau (tbody) en rendant invisible le contenu au delà de cette hauteur.
Pour que cela fonctionne il faut changer le type d'affichage en block de toutes les sections du tableau.
Pour l'esthétique, nous avons ajouté un coloriage une ligne sur deux.
| Principales propriétés de CSS | ||
|---|---|---|
| Propriétés | Statut | Utilisable en |
| -moz-border-end | D | [HTML] |
| -moz-border-start | D | [HTML] |
| -moz-float-edge | D | [HTML] |
| -moz-force-broken-image-icon | D | [HTML] |
| -moz-image-region | D | [HTML] |
| -webkit-font-smoothing | D | [HTML] |
| -webkit-tap-highlight-color | D | [HTML] |
| -webkit-text-stroke | D | [HTML] |
| accent-color | S | [HTML] |
| align-content | S | [HTML] |
| align-items | S | [HTML] |
| align-self | S | [HTML] |
| alignment-baseline | S | [HTML], [SVG] |
| all | S | [HTML] |
| animation | S | [HTML] |
| animation-composition | S | [HTML] |
| animation-delay | S | [HTML] |
| animation-direction | S | [HTML] |
| animation-duration | S | [HTML] |
| animation-fill-mode | S | [HTML] |
| animation-iteration-count | S | [HTML] |
| animation-name | S | [HTML] |
| animation-play-state | S | [HTML] |
| animation-range | X | [HTML] |
| animation-range-end | X | [HTML] |
| animation-range-start | X | [HTML] |
| animation-timeline | X | [HTML] |
| animation-timing-function | S | [HTML] |
| appearance | X | [HTML] |
| aspect-ratio | S | [HTML] |
| azimuth | D | [HTML] |
| backdrop-filter | S | [HTML] |
| backface-visibility | S | [HTML] |
| background | S | [HTML] |
| background-attachment | S | [HTML] |
| background-blend-mode | S | [HTML] |
| background-clip | S | [HTML] |
| background-color | S | [HTML] |
| background-image | S | [HTML] |
| background-origin | S | [HTML] |
| background-position | S | [HTML] |
| background-position-x | S | [HTML] |
| background-position-y | S | [HTML] |
| background-repeat | S | [HTML] |
| background-size | S | [HTML] |
| baseline-shift | X | [HTML], [SVG] |
| baseline-source | X | [HTML] |
| bleed | X | [HTML] |
| block-ellipsis | X | [HTML] |
| block-size | S | [HTML] |
| border | S | [HTML] |
| border-block-color | S | [HTML], [SVG] |
| border-block-end | S | [HTML], [SVG] |
| border-block-end-color | S | [HTML], [SVG] |
| border-block-end-style | S | [HTML], [SVG] |
| border-block-end-width | S | [HTML], [SVG] |
| border-block-start | S | [HTML], [SVG] |
| border-block-start-color | S | [HTML], [SVG] |
| border-block-start-style | S | [HTML], [SVG] |
| border-block-start-width | S | [HTML], [SVG] |
| border-block-style | S | [HTML], [SVG] |
| border-block-width | S | [HTML], [SVG] |
| border-bottom-left-radius | S | [HTML] |
| border-bottom-right-radius | S | [HTML] |
| border-collapse | S | [HTML] |
| border-color | S | [HTML] |
| border-end-end-radius | S | [HTML], [SVG] |
| border-end-start-radius | S | [HTML], [SVG] |
| border-image | S | [HTML] |
| border-image-outset | S | [HTML] |
| border-image-repeat | S | [HTML] |
| border-image-slice | S | [HTML] |
| border-image-source | S | [HTML] |
| border-image-width | S | [HTML] |
| border-inline-color | S | [HTML], [SVG] |
| border-inline-end | S | [HTML], [SVG] |
| border-inline-end-color | S | [HTML], [SVG] |
| border-inline-end-style | S | [HTML], [SVG] |
| border-inline-end-width | S | [HTML], [SVG] |
| border-inline-start | S | [HTML], [SVG] |
| border-inline-start-color | S | [HTML], [SVG] |
| border-inline-start-style | S | [HTML], [SVG] |
| border-inline-start-width | S | [HTML], [SVG] |
| border-inline-style | S | [HTML], [SVG] |
| border-inline-width | S | [HTML], [SVG] |
| border-radius | S | [HTML] |
| border-spacing | S | [HTML] |
| border-start-end-radius | S | [HTML], [SVG] |
| border-start-start-radius | S | [HTML], [SVG] |
| border-style | S | [HTML] |
| border-top-left-radius | S | [HTML] |
| border-top-right-radius | S | [HTML] |
| border-width | S | [HTML] |
| bottom | S | [HTML] |
| box-align | D | [HTML] |
| box-decoration-break | S | [HTML] |
| box-direction | D | [HTML] |
| box-flex | D | [HTML] |
| box-lines | D | [HTML] |
| box-ordinal-group | D | [HTML] |
| box-orient | D | [HTML] |
| box-pack | D | [HTML] |
| box-reflect | D | [HTML] |
| box-shadow | S | [HTML] |
| box-sizing | S | [HTML] |
| break-after | S | [HTML] |
| break-before | S | [HTML] |
| break-inside | S | [HTML] |
| caption-side | S | [HTML] |
| caret | X | [HTML] |
| caret-color | S | [HTML] |
| caret-shape | X | [HTML] |
| clear | S | [HTML] |
| clip | D | [HTML], [SVG] |
| clip-path | S | [HTML], [SVG] |
| clip-rule | S | [HTML], [SVG] |
| color | S | [HTML], [SVG] [1] |
| color-adjust | D | [HTML] |
| color-interpolation | S | [SVG] |
| color-interpolation-filters | S | [SVG] |
| column-count | S | [HTML] |
| column-fill | S | [HTML] |
| column-gap | S | [HTML] |
| column-rule | S | [HTML] |
| column-rule-color | S | [HTML] |
| column-rule-style | S | [HTML] |
| column-rule-width | S | [HTML] |
| column-span | S | [HTML] |
| column-width | S | [HTML] |
| columns | S | [HTML] |
| contain | S | [HTML] |
| contain-intrinsic-block-size | S | [HTML] |
| contain-intrinsic-height | S | [HTML] |
| contain-intrinsic-inline-size | S | [HTML] |
| contain-intrinsic-size | S | [HTML] |
| contain-intrinsic-width | S | [HTML] |
| container | S | [HTML] |
| container-name | S | [HTML] |
| container-type | S | [HTML] |
| content | S | [HTML] |
| content-visibility | S | [HTML] |
| counter-increment | S | [HTML] |
| counter-reset | S | [HTML] |
| counter-set | S | [HTML] |
| cue | X | [HTML] |
| cue-after | X | [HTML] |
| cue-before | X | [HTML] |
| cursor | S | [HTML], [SVG] |
| cx | S | [SVG] |
| cy | S | [SVG] |
| direction | S | [HTML], [SVG] |
| display | S | [HTML], [SVG] [1] |
| dominant-baseline | S | [HTML], [SVG] |
| elevation | D | [HTML] |
| empty-cells | S | [HTML] |
| fill | X | [SVG] |
| fill-color | X | [SVG] |
| fill-opacity | S | [SVG] |
| fill-rule | S | [SVG] |
| filter | S | [HTML], [SVG] |
| flex | S | [HTML] |
| flex-basis | S | [HTML] |
| flex-direction | S | [HTML] |
| flex-flow | S | [HTML] |
| flex-grow | S | [HTML] |
| flex-shrink | S | [HTML] |
| flex-wrap | S | [HTML] |
| float | S | [HTML] |
| float-defer | X | [HTML] |
| float-offset | X | [HTML] |
| float-reference | X | [HTML] |
| flood-color | S | [SVG] |
| flood-opacity | S | [SVG] |
| flow-from | X | [HTML] |
| flow-into | X | [HTML] |
| font | S | [HTML], [SVG] |
| font-effect | D | [HTML] |
| font-family | S | [HTML], [SVG] |
| font-feature-settings | X | [HTML] |
| font-kerning | S | [HTML] |
| font-language-override | X | [HTML] |
| font-optical-sizing | X | [HTML] |
| font-palette | S | [HTML] |
| font-size | S | [HTML] |
| font-size-adjust | S | [HTML], [SVG] |
| font-smooth | D | [HTML] |
| font-stretch | S | [HTML], [SVG] |
| font-style | S | [HTML], [SVG] |
| font-synthesis | S | [HTML] |
| font-synthesis-position | X | [HTML] |
| font-synthesis-small-caps | X | [HTML] |
| font-synthesis-style | X | [HTML] |
| font-synthesis-weight | X | [HTML] |
| font-variant | S | [HTML], [SVG] |
| font-variant-alternates | S | [HTML] |
| font-variant-caps | S | [HTML] |
| font-variant-east-asian | S | [HTML] |
| font-variant-emoji | X | [HTML] |
| font-variant-ligatures | S | [HTML] |
| font-variant-numeric | S | [HTML] |
| font-variant-position | S | [HTML] |
| font-variation-settings | X | [HTML] |
| font-weight | S | [HTML], [SVG] |
| font-width | S | [HTML] |
| forced-color-adjust | X | [HTML] |
| gap | S | [HTML] |
| glyph-orientation-vertical | D | [HTML], [SVG] |
| grid | S | [HTML] |
| grid-area | S | [HTML] |
| grid-auto-columns | S | [HTML] |
| grid-auto-flow | S | [HTML] |
| grid-auto-rows | S | [HTML] |
| grid-column | S | [HTML] |
| grid-column-end | S | [HTML] |
| grid-column-gap | S | [HTML] |
| grid-column-start | S | [HTML] |
| grid-gap | S | [HTML] |
| grid-row | S | [HTML] |
| grid-row-end | S | [HTML] |
| grid-row-gap | S | [HTML] |
| grid-row-start | S | [HTML] |
| grid-template | S | [HTML] |
| grid-template-areas | S | [HTML] |
| grid-template-columns | S | [HTML] |
| grid-template-rows | S | [HTML] |
| hanging-punctuation | X | [HTML] |
| height | S | [HTML], [SVG] |
| hyphenate-character | S | [HTML] |
| hyphenate-limit-chars | X | [HTML] |
| hyphenate-limit-last | X | [HTML] |
| hyphenate-limit-lines | X | [HTML] |
| hyphenate-limit-zone | X | [HTML] |
| hyphens | S | [HTML] |
| image-orientation | S | [HTML] |
| image-rendering | S | [HTML], [SVG] |
| ime-mode | D | [HTML] |
| initial-letter | X | [HTML] |
| initial-letter-wrap | X | [HTML] |
| inline-size | S | [HTML] |
| inset | S | [HTML] |
| inset-block | S | [HTML] |
| inset-block-end | S | [HTML] |
| inset-block-start | S | [HTML] |
| inset-inline | S | [HTML] |
| inset-inline-end | S | [HTML] |
| inset-inline-start | S | [HTML] |
| isolation | S | [HTML] |
| justify-content | S | [HTML] |
| justify-items | S | [HTML] |
| justify-self | S | [HTML] |
| left | S | [HTML] |
| letter-spacing | S | [HTML], [SVG] |
| lighting-color | S | [SVG] |
| line-break | S | [HTML] |
| line-height | S | [HTML] |
| line-padding | X | [HTML] |
| list-style | S | [HTML] |
| list-style-image | S | [HTML] |
| list-style-position | S | [HTML] |
| list-style-type | S | [HTML] |
| margin | S | [HTML] |
| margin-block | S | [HTML] |
| margin-block-end | S | [HTML] |
| margin-block-start | S | [HTML] |
| margin-bottom | S | [HTML] |
| margin-inline | S | [HTML] |
| margin-inline-end | S | [HTML] |
| margin-inline-start | S | [HTML] |
| margin-left | S | [HTML] |
| margin-right | S | [HTML] |
| margin-top | S | [HTML] |
| margin-trim | X | [HTML] |
| marker-end | S | [SVG] |
| marker-mid | S | [SVG] |
| marker-offset | D | [HTML] |
| marker-side | X | [HTML] |
| marker-start | S | [SVG] |
| marks | X | [HTML] |
| mask | S | [HTML], [SVG] |
| mask-border | S | [HTML], [SVG] |
| mask-border-mode | X | [HTML], [SVG] |
| mask-border-outset | X | [HTML], [SVG] |
| mask-border-repeat | X | [HTML], [SVG] |
| mask-border-slice | X | [HTML], [SVG] |
| mask-border-source | X | [HTML], [SVG] |
| mask-border-width | X | [HTML], [SVG] |
| mask-clip | S | [HTML], [SVG] |
| mask-composite | S | [HTML], [SVG] |
| mask-image | S | [HTML], [SVG] |
| mask-mode | S | [HTML], [SVG] |
| mask-origin | S | [HTML], [SVG] |
| mask-position | S | [HTML], [SVG] |
| mask-repeat | S | [HTML], [SVG] |
| mask-size | S | [HTML], [SVG] |
| max-block-size | S | [HTML] |
| max-height | S | [HTML] |
| max-inline-size | S | [HTML] |
| max-width | S | [HTML] |
| min-block-size | S | [HTML] |
| min-height | S | [HTML] |
| min-inline-size | S | [HTML] |
| min-width | S | [HTML] |
| mix-blend-mode | S | [HTML] |
| object-fit | S | [HTML] |
| object-position | S | [HTML] |
| offset | S | [HTML], [SVG] |
| offset-anchor | S | [HTML], [SVG] |
| offset-distance | S | [HTML], [SVG] |
| offset-path | S | [HTML], [SVG] |
| offset-position | S | [HTML], [SVG] |
| offset-rotate | S | [HTML], [SVG] |
| opacity | S | [HTML], [SVG] |
| order | S | [HTML] |
| orphans | S | [HTML] |
| outline | S | [HTML] |
| outline-color | S | [HTML] |
| outline-offset | S | [HTML] |
| outline-style | S | [HTML] |
| outline-width | S | [HTML] |
| overflow | S | [HTML], [SVG] |
| overflow-block | S | [HTML] |
| overflow-clip-margin | S | [HTML] |
| overflow-inline | S | [HTML] |
| overflow-wrap | S | [HTML] |
| overflow-x | S | [HTML] |
| overflow-y | S | [HTML] |
| padding | S | [HTML] |
| padding-block | S | [HTML] |
| padding-block-end | S | [HTML] |
| padding-block-start | S | [HTML] |
| padding-bottom | S | [HTML] |
| padding-inline | S | [HTML] |
| padding-inline-end | S | [HTML] |
| padding-inline-start | S | [HTML] |
| padding-left | S | [HTML] |
| padding-right | S | [HTML] |
| padding-top | S | [HTML] |
| page-break-after | D | [HTML] |
| page-break-before | D | [HTML] |
| page-break-inside | D | [HTML] |
| paint-order | S | [SVG] |
| pause | X | [HTML] |
| pause-after | X | [HTML] |
| pause-before | X | [HTML] |
| perspective | S | [HTML] |
| perspective-origin | S | [HTML] |
| pitch | D | [HTML] |
| pitch-range | D | [HTML] |
| place-content | S | [HTML] |
| place-items | S | [HTML] |
| place-self | S | [HTML] |
| play-during | D | [HTML] |
| pointer-events | S | [HTML], [SVG] |
| position | S | [HTML] |
| print-color-adjust | S | [HTML] |
| quotes | S | [HTML] |
| r | S | [SVG] |
| resize | S | [HTML] |
| rest | X | [HTML] |
| rest-after | X | [HTML] |
| rest-before | X | [HTML] |
| richness | D | [HTML] |
| right | S | [HTML] |
| rotate | S | [HTML] |
| row-gap | S | [HTML] |
| ruby-align | X | [HTML] |
| ruby-merge | X | [HTML] |
| ruby-overhang | X | [HTML] |
| ruby-position | X | [HTML] |
| rx | S | [SVG] |
| ry | S | [SVG] |
| scale | S | [HTML] |
| scroll-behavior | S | [HTML] |
| scroll-margin | S | [HTML] |
| scroll-padding | S | [HTML] |
| scroll-snap-align | S | HTML |
| scroll-snap-stop | S | [HTML] |
| scroll-snap-type | S | {HTML} |
| scroll-timeline | X | [HTML] |
| scroll-timeline-axis | X | [HTML] |
| scroll-timeline-name | X | [HTML] |
| scrollbar-3dlight-color | D | [HTML] |
| scrollbar-arrow-color | D | [HTML] |
| scrollbar-base-color | D | [HTML] |
| scrollbar-color | X | [HTML] |
| scrollbar-darkshadow-colo | D | [HTML] |
| scrollbar-face-color | D | [HTML] |
| scrollbar-gutter | X | [HTML] |
| scrollbar-highlight-color | D | [HTML] |
| scrollbar-shadow-color | D | [HTML] |
| scrollbar-track-color | D | [HTML] |
| scrollbar-width | X | [HTML] |
| shape-image-threshold | S | [HTML] |
| shape-margin | S | [HTML] |
| shape-outside | S | [HTML] |
| shape-rendering | S | [SVG] |
| size | S | [HTML] |
| speak | X | [HTML] |
| speak-as | X | [HTML] |
| speak-header | D | [HTML] |
| speak-numeral | D | [HTML] |
| speak-punctuation | D | [HTML] |
| speech-rate | D | [HTML] |
| stress | D | [HTML] |
| stroke | S | [SVG] |
| stroke-color | X | [SVG] |
| stroke-dash-corner | X | [SVG] |
| stroke-dash-justify | X | [SVG] |
| stroke-dasharray | S | [SVG] |
| stroke-dashoffset | S | [SVG] |
| stroke-linecap | S | [SVG] |
| stroke-linejoin | S | [SVG] |
| stroke-miterlimit | S | [SVG] |
| stroke-opacity | S | [SVG] |
| stroke-width | S | [SVG] |
| tab-size | S | [HTML] |
| table-layout | S | [HTML] |
| text-align | S | [HTML] |
| text-align-all | X | [HTML] |
| text-align-last | S | [HTML] |
| text-anchor | S | [SVG] |
| text-autospace | X | [HTML] |
| text-box-edge | X | [HTML] |
| text-box-trim | X | [HTML] |
| text-combine-upright | S | [HTML] |
| text-decoration | S | [HTML], [SVG] [1] |
| text-decoration-color | S | [HTML] |
| text-decoration-line | S | [HTML], [SVG] |
| text-decoration-skip | X | [HTML] |
| text-decoration-skip-box | X | [HTML] |
| text-decoration-skip-ink | X | [HTML], [SVG] |
| text-decoration-skip-inset | X | [HTML] |
| text-decoration-skip-self | X | [HTML] |
| text-decoration-skip-spaces | X | [HTML] |
| text-decoration-style | S | [HTML], [SVG] |
| text-decoration-thickness | S | [HTML], [SVG] |
| text-emphasis | S | [HTML], [SVG] |
| text-emphasis-color | S | [HTML], [SVG] |
| text-emphasis-position | S | [HTML], [SVG] |
| text-emphasis-skip | X | [HTML] |
| text-emphasis-style | S | [HTML], [SVG] |
| text-group-align | X | [HTML] |
| text-indent | S | [HTML] |
| text-justify | X | [HTML] |
| text-orientation | S | [HTML] |
| text-overflow | S | [HTML] |
| text-rendering | S | [HTML] [1], [SVG] |
| text-shadow | S | [HTML], [SVG] |
| text-size-adjust | X | [HTML] |
| text-space-collapse | D | [HTML] |
| text-space-trim | D | [HTML] |
| text-spacing | X | [HTML] |
| text-spacing-trim | X | [HTML] |
| text-transform | S | [HTML], [SVG] |
| text-underline-offset | S | [HTML], [SVG] |
| text-underline-position | S | [HTML], [SVG] |
| text-wrap | X | [HTML] |
| timeline-scope | X | [HTML] |
| top | S | [HTML] |
| touch-action | S | [HTML] |
| transform | S | [HTML], [SVG] |
| transform-box | S | [HTML], [SVG] |
| transform-origin | S | [HTML], [SVG] |
| transform-style | S | [HTML] |
| transition | S | [HTML] |
| transition-behavior | S | [HTML] |
| transition-delay | S | [HTML] |
| transition-duration | S | [HTML] |
| transition-property | S | [HTML] |
| transition-timing-function | S | [HTML] |
| translate | S | [HTML] |
| unicode-bidi | S | [HTML], [SVG] |
| user-select | S | [HTML] |
| vector-effect | X | [SVG] |
| vertical-align | S | [HTML] |
| view-timeline | X | [HTML] |
| view-timeline-axis | X | [HTML] |
| view-timeline-inset | X | [HTML] |
| view-timeline-name | X | [HTML] |
| view-transition-name | S | [HTML] |
| visibility | S | [HTML], [SVG] |
| voice-balance | X | [HTML] |
| voice-duration | X | [HTML] |
| voice-family | X | [HTML] |
| voice-pitch | X | [HTML] |
| voice-range | X | [HTML] |
| voice-rate | X | [HTML] |
| voice-stress | X | [HTML] |
| voice-volume | X | [HTML] |
| volume | D | [HTML] |
| white-space | S | [HTML] |
| white-space-collapse | S | [HTML] |
| white-space-trim | X | [HTML] |
| widows | S | [HTML] |
| width | S | [HTML], [SVG] |
| will-change | S | [HTML] |
| word-boundary-detection | X | [HTML] |
| word-boundary-expansion | D | [HTML] |
| word-break | S | [HTML] |
| word-space-transform | X | [HTML] |
| word-spacing | S | [HTML],[SVG] |
| word-wrap | S | [HTML] |
| wrap-after | X | [HTML] |
| wrap-before | X | [HTML] |
| wrap-inside | X | [HTML] |
| writing-mode | S | [HTML], [SVG] |
| x | S | [SVG] |
| y | S | [SVG] |
| z-index | S | [HTML] |
| zoom | X | [HTML] | 510 propriétés listées |
Autre solution : sticky.
Dans cette deuxième solution le corps du tableau conserve sa hauteur complète
mais les titres (section thead) sont en position sticky,
ce qui veut dire qu'ils défileront jusqu'à buter sur le haut de l'écran, mais sans disparaître par le haut.
| Principales propriétés de CSS | ||
|---|---|---|
| Propriétés | Statut | Utilisable en |
| -moz-border-end | D | [HTML] |
| -moz-border-start | D | [HTML] |
| -moz-float-edge | D | [HTML] |
| -moz-force-broken-image-icon | D | [HTML] |
| -moz-image-region | D | [HTML] |
| -webkit-font-smoothing | D | [HTML] |
| -webkit-tap-highlight-color | D | [HTML] |
| -webkit-text-stroke | D | [HTML] |
| accent-color | S | [HTML] |
| align-content | S | [HTML] |
| align-items | S | [HTML] |
| align-self | S | [HTML] |
| alignment-baseline | S | [HTML], [SVG] |
| all | S | [HTML] |
| animation | S | [HTML] |
| animation-composition | S | [HTML] |
| animation-delay | S | [HTML] |
| animation-direction | S | [HTML] |
| animation-duration | S | [HTML] |
| animation-fill-mode | S | [HTML] |
| animation-iteration-count | S | [HTML] |
| animation-name | S | [HTML] |
| animation-play-state | S | [HTML] |
| animation-range | X | [HTML] |
| animation-range-end | X | [HTML] |
| animation-range-start | X | [HTML] |
| animation-timeline | X | [HTML] |
| animation-timing-function | S | [HTML] |
| appearance | X | [HTML] |
| aspect-ratio | S | [HTML] |
| azimuth | D | [HTML] |
| backdrop-filter | S | [HTML] |
| backface-visibility | S | [HTML] |
| background | S | [HTML] |
| background-attachment | S | [HTML] |
| background-blend-mode | S | [HTML] |
| background-clip | S | [HTML] |
| background-color | S | [HTML] |
| background-image | S | [HTML] |
| background-origin | S | [HTML] |
| background-position | S | [HTML] |
| background-position-x | S | [HTML] |
| background-position-y | S | [HTML] |
| background-repeat | S | [HTML] |
| background-size | S | [HTML] |
| baseline-shift | X | [HTML], [SVG] |
| baseline-source | X | [HTML] |
| bleed | X | [HTML] |
| block-ellipsis | X | [HTML] |
| block-size | S | [HTML] |
| border | S | [HTML] |
| border-block-color | S | [HTML], [SVG] |
| border-block-end | S | [HTML], [SVG] |
| border-block-end-color | S | [HTML], [SVG] |
| border-block-end-style | S | [HTML], [SVG] |
| border-block-end-width | S | [HTML], [SVG] |
| border-block-start | S | [HTML], [SVG] |
| border-block-start-color | S | [HTML], [SVG] |
| border-block-start-style | S | [HTML], [SVG] |
| border-block-start-width | S | [HTML], [SVG] |
| border-block-style | S | [HTML], [SVG] |
| border-block-width | S | [HTML], [SVG] |
| border-bottom-left-radius | S | [HTML] |
| border-bottom-right-radius | S | [HTML] |
| border-collapse | S | [HTML] |
| border-color | S | [HTML] |
| border-end-end-radius | S | [HTML], [SVG] |
| border-end-start-radius | S | [HTML], [SVG] |
| border-image | S | [HTML] |
| border-image-outset | S | [HTML] |
| border-image-repeat | S | [HTML] |
| border-image-slice | S | [HTML] |
| border-image-source | S | [HTML] |
| border-image-width | S | [HTML] |
| border-inline-color | S | [HTML], [SVG] |
| border-inline-end | S | [HTML], [SVG] |
| border-inline-end-color | S | [HTML], [SVG] |
| border-inline-end-style | S | [HTML], [SVG] |
| border-inline-end-width | S | [HTML], [SVG] |
| border-inline-start | S | [HTML], [SVG] |
| border-inline-start-color | S | [HTML], [SVG] |
| border-inline-start-style | S | [HTML], [SVG] |
| border-inline-start-width | S | [HTML], [SVG] |
| border-inline-style | S | [HTML], [SVG] |
| border-inline-width | S | [HTML], [SVG] |
| border-radius | S | [HTML] |
| border-spacing | S | [HTML] |
| border-start-end-radius | S | [HTML], [SVG] |
| border-start-start-radius | S | [HTML], [SVG] |
| border-style | S | [HTML] |
| border-top-left-radius | S | [HTML] |
| border-top-right-radius | S | [HTML] |
| border-width | S | [HTML] |
| bottom | S | [HTML] |
| box-align | D | [HTML] |
| box-decoration-break | S | [HTML] |
| box-direction | D | [HTML] |
| box-flex | D | [HTML] |
| box-lines | D | [HTML] |
| box-ordinal-group | D | [HTML] |
| box-orient | D | [HTML] |
| box-pack | D | [HTML] |
| box-reflect | D | [HTML] |
| box-shadow | S | [HTML] |
| box-sizing | S | [HTML] |
| break-after | S | [HTML] |
| break-before | S | [HTML] |
| break-inside | S | [HTML] |
| caption-side | S | [HTML] |
| caret | X | [HTML] |
| caret-color | S | [HTML] |
| caret-shape | X | [HTML] |
| clear | S | [HTML] |
| clip | D | [HTML], [SVG] |
| clip-path | S | [HTML], [SVG] |
| clip-rule | S | [HTML], [SVG] |
| color | S | [HTML], [SVG] [1] |
| color-adjust | D | [HTML] |
| color-interpolation | S | [SVG] |
| color-interpolation-filters | S | [SVG] |
| column-count | S | [HTML] |
| column-fill | S | [HTML] |
| column-gap | S | [HTML] |
| column-rule | S | [HTML] |
| column-rule-color | S | [HTML] |
| column-rule-style | S | [HTML] |
| column-rule-width | S | [HTML] |
| column-span | S | [HTML] |
| column-width | S | [HTML] |
| columns | S | [HTML] |
| contain | S | [HTML] |
| contain-intrinsic-block-size | S | [HTML] |
| contain-intrinsic-height | S | [HTML] |
| contain-intrinsic-inline-size | S | [HTML] |
| contain-intrinsic-size | S | [HTML] |
| contain-intrinsic-width | S | [HTML] |
| container | S | [HTML] |
| container-name | S | [HTML] |
| container-type | S | [HTML] |
| content | S | [HTML] |
| content-visibility | S | [HTML] |
| counter-increment | S | [HTML] |
| counter-reset | S | [HTML] |
| counter-set | S | [HTML] |
| cue | X | [HTML] |
| cue-after | X | [HTML] |
| cue-before | X | [HTML] |
| cursor | S | [HTML], [SVG] |
| cx | S | [SVG] |
| cy | S | [SVG] |
| direction | S | [HTML], [SVG] |
| display | S | [HTML], [SVG] [1] |
| dominant-baseline | S | [HTML], [SVG] |
| elevation | D | [HTML] |
| empty-cells | S | [HTML] |
| fill | X | [SVG] |
| fill-color | X | [SVG] |
| fill-opacity | S | [SVG] |
| fill-rule | S | [SVG] |
| filter | S | [HTML], [SVG] |
| flex | S | [HTML] |
| flex-basis | S | [HTML] |
| flex-direction | S | [HTML] |
| flex-flow | S | [HTML] |
| flex-grow | S | [HTML] |
| flex-shrink | S | [HTML] |
| flex-wrap | S | [HTML] |
| float | S | [HTML] |
| float-defer | X | [HTML] |
| float-offset | X | [HTML] |
| float-reference | X | [HTML] |
| flood-color | S | [SVG] |
| flood-opacity | S | [SVG] |
| flow-from | X | [HTML] |
| flow-into | X | [HTML] |
| font | S | [HTML], [SVG] |
| font-effect | D | [HTML] |
| font-family | S | [HTML], [SVG] |
| font-feature-settings | X | [HTML] |
| font-kerning | S | [HTML] |
| font-language-override | X | [HTML] |
| font-optical-sizing | X | [HTML] |
| font-palette | S | [HTML] |
| font-size | S | [HTML] |
| font-size-adjust | S | [HTML], [SVG] |
| font-smooth | D | [HTML] |
| font-stretch | S | [HTML], [SVG] |
| font-style | S | [HTML], [SVG] |
| font-synthesis | S | [HTML] |
| font-synthesis-position | X | [HTML] |
| font-synthesis-small-caps | X | [HTML] |
| font-synthesis-style | X | [HTML] |
| font-synthesis-weight | X | [HTML] |
| font-variant | S | [HTML], [SVG] |
| font-variant-alternates | S | [HTML] |
| font-variant-caps | S | [HTML] |
| font-variant-east-asian | S | [HTML] |
| font-variant-emoji | X | [HTML] |
| font-variant-ligatures | S | [HTML] |
| font-variant-numeric | S | [HTML] |
| font-variant-position | S | [HTML] |
| font-variation-settings | X | [HTML] |
| font-weight | S | [HTML], [SVG] |
| font-width | S | [HTML] |
| forced-color-adjust | X | [HTML] |
| gap | S | [HTML] |
| glyph-orientation-vertical | D | [HTML], [SVG] |
| grid | S | [HTML] |
| grid-area | S | [HTML] |
| grid-auto-columns | S | [HTML] |
| grid-auto-flow | S | [HTML] |
| grid-auto-rows | S | [HTML] |
| grid-column | S | [HTML] |
| grid-column-end | S | [HTML] |
| grid-column-gap | S | [HTML] |
| grid-column-start | S | [HTML] |
| grid-gap | S | [HTML] |
| grid-row | S | [HTML] |
| grid-row-end | S | [HTML] |
| grid-row-gap | S | [HTML] |
| grid-row-start | S | [HTML] |
| grid-template | S | [HTML] |
| grid-template-areas | S | [HTML] |
| grid-template-columns | S | [HTML] |
| grid-template-rows | S | [HTML] |
| hanging-punctuation | X | [HTML] |
| height | S | [HTML], [SVG] |
| hyphenate-character | S | [HTML] |
| hyphenate-limit-chars | X | [HTML] |
| hyphenate-limit-last | X | [HTML] |
| hyphenate-limit-lines | X | [HTML] |
| hyphenate-limit-zone | X | [HTML] |
| hyphens | S | [HTML] |
| image-orientation | S | [HTML] |
| image-rendering | S | [HTML], [SVG] |
| ime-mode | D | [HTML] |
| initial-letter | X | [HTML] |
| initial-letter-wrap | X | [HTML] |
| inline-size | S | [HTML] |
| inset | S | [HTML] |
| inset-block | S | [HTML] |
| inset-block-end | S | [HTML] |
| inset-block-start | S | [HTML] |
| inset-inline | S | [HTML] |
| inset-inline-end | S | [HTML] |
| inset-inline-start | S | [HTML] |
| isolation | S | [HTML] |
| justify-content | S | [HTML] |
| justify-items | S | [HTML] |
| justify-self | S | [HTML] |
| left | S | [HTML] |
| letter-spacing | S | [HTML], [SVG] |
| lighting-color | S | [SVG] |
| line-break | S | [HTML] |
| line-height | S | [HTML] |
| line-padding | X | [HTML] |
| list-style | S | [HTML] |
| list-style-image | S | [HTML] |
| list-style-position | S | [HTML] |
| list-style-type | S | [HTML] |
| margin | S | [HTML] |
| margin-block | S | [HTML] |
| margin-block-end | S | [HTML] |
| margin-block-start | S | [HTML] |
| margin-bottom | S | [HTML] |
| margin-inline | S | [HTML] |
| margin-inline-end | S | [HTML] |
| margin-inline-start | S | [HTML] |
| margin-left | S | [HTML] |
| margin-right | S | [HTML] |
| margin-top | S | [HTML] |
| margin-trim | X | [HTML] |
| marker-end | S | [SVG] |
| marker-mid | S | [SVG] |
| marker-offset | D | [HTML] |
| marker-side | X | [HTML] |
| marker-start | S | [SVG] |
| marks | X | [HTML] |
| mask | S | [HTML], [SVG] |
| mask-border | S | [HTML], [SVG] |
| mask-border-mode | X | [HTML], [SVG] |
| mask-border-outset | X | [HTML], [SVG] |
| mask-border-repeat | X | [HTML], [SVG] |
| mask-border-slice | X | [HTML], [SVG] |
| mask-border-source | X | [HTML], [SVG] |
| mask-border-width | X | [HTML], [SVG] |
| mask-clip | S | [HTML], [SVG] |
| mask-composite | S | [HTML], [SVG] |
| mask-image | S | [HTML], [SVG] |
| mask-mode | S | [HTML], [SVG] |
| mask-origin | S | [HTML], [SVG] |
| mask-position | S | [HTML], [SVG] |
| mask-repeat | S | [HTML], [SVG] |
| mask-size | S | [HTML], [SVG] |
| max-block-size | S | [HTML] |
| max-height | S | [HTML] |
| max-inline-size | S | [HTML] |
| max-width | S | [HTML] |
| min-block-size | S | [HTML] |
| min-height | S | [HTML] |
| min-inline-size | S | [HTML] |
| min-width | S | [HTML] |
| mix-blend-mode | S | [HTML] |
| object-fit | S | [HTML] |
| object-position | S | [HTML] |
| offset | S | [HTML], [SVG] |
| offset-anchor | S | [HTML], [SVG] |
| offset-distance | S | [HTML], [SVG] |
| offset-path | S | [HTML], [SVG] |
| offset-position | S | [HTML], [SVG] |
| offset-rotate | S | [HTML], [SVG] |
| opacity | S | [HTML], [SVG] |
| order | S | [HTML] |
| orphans | S | [HTML] |
| outline | S | [HTML] |
| outline-color | S | [HTML] |
| outline-offset | S | [HTML] |
| outline-style | S | [HTML] |
| outline-width | S | [HTML] |
| overflow | S | [HTML], [SVG] |
| overflow-block | S | [HTML] |
| overflow-clip-margin | S | [HTML] |
| overflow-inline | S | [HTML] |
| overflow-wrap | S | [HTML] |
| overflow-x | S | [HTML] |
| overflow-y | S | [HTML] |
| padding | S | [HTML] |
| padding-block | S | [HTML] |
| padding-block-end | S | [HTML] |
| padding-block-start | S | [HTML] |
| padding-bottom | S | [HTML] |
| padding-inline | S | [HTML] |
| padding-inline-end | S | [HTML] |
| padding-inline-start | S | [HTML] |
| padding-left | S | [HTML] |
| padding-right | S | [HTML] |
| padding-top | S | [HTML] |
| page-break-after | D | [HTML] |
| page-break-before | D | [HTML] |
| page-break-inside | D | [HTML] |
| paint-order | S | [SVG] |
| pause | X | [HTML] |
| pause-after | X | [HTML] |
| pause-before | X | [HTML] |
| perspective | S | [HTML] |
| perspective-origin | S | [HTML] |
| pitch | D | [HTML] |
| pitch-range | D | [HTML] |
| place-content | S | [HTML] |
| place-items | S | [HTML] |
| place-self | S | [HTML] |
| play-during | D | [HTML] |
| pointer-events | S | [HTML], [SVG] |
| position | S | [HTML] |
| print-color-adjust | S | [HTML] |
| quotes | S | [HTML] |
| r | S | [SVG] |
| resize | S | [HTML] |
| rest | X | [HTML] |
| rest-after | X | [HTML] |
| rest-before | X | [HTML] |
| richness | D | [HTML] |
| right | S | [HTML] |
| rotate | S | [HTML] |
| row-gap | S | [HTML] |
| ruby-align | X | [HTML] |
| ruby-merge | X | [HTML] |
| ruby-overhang | X | [HTML] |
| ruby-position | X | [HTML] |
| rx | S | [SVG] |
| ry | S | [SVG] |
| scale | S | [HTML] |
| scroll-behavior | S | [HTML] |
| scroll-margin | S | [HTML] |
| scroll-padding | S | [HTML] |
| scroll-snap-align | S | HTML |
| scroll-snap-stop | S | [HTML] |
| scroll-snap-type | S | {HTML} |
| scroll-timeline | X | [HTML] |
| scroll-timeline-axis | X | [HTML] |
| scroll-timeline-name | X | [HTML] |
| scrollbar-3dlight-color | D | [HTML] |
| scrollbar-arrow-color | D | [HTML] |
| scrollbar-base-color | D | [HTML] |
| scrollbar-color | X | [HTML] |
| scrollbar-darkshadow-colo | D | [HTML] |
| scrollbar-face-color | D | [HTML] |
| scrollbar-gutter | X | [HTML] |
| scrollbar-highlight-color | D | [HTML] |
| scrollbar-shadow-color | D | [HTML] |
| scrollbar-track-color | D | [HTML] |
| scrollbar-width | X | [HTML] |
| shape-image-threshold | S | [HTML] |
| shape-margin | S | [HTML] |
| shape-outside | S | [HTML] |
| shape-rendering | S | [SVG] |
| size | S | [HTML] |
| speak | X | [HTML] |
| speak-as | X | [HTML] |
| speak-header | D | [HTML] |
| speak-numeral | D | [HTML] |
| speak-punctuation | D | [HTML] |
| speech-rate | D | [HTML] |
| stress | D | [HTML] |
| stroke | S | [SVG] |
| stroke-color | X | [SVG] |
| stroke-dash-corner | X | [SVG] |
| stroke-dash-justify | X | [SVG] |
| stroke-dasharray | S | [SVG] |
| stroke-dashoffset | S | [SVG] |
| stroke-linecap | S | [SVG] |
| stroke-linejoin | S | [SVG] |
| stroke-miterlimit | S | [SVG] |
| stroke-opacity | S | [SVG] |
| stroke-width | S | [SVG] |
| tab-size | S | [HTML] |
| table-layout | S | [HTML] |
| text-align | S | [HTML] |
| text-align-all | X | [HTML] |
| text-align-last | S | [HTML] |
| text-anchor | S | [SVG] |
| text-autospace | X | [HTML] |
| text-box-edge | X | [HTML] |
| text-box-trim | X | [HTML] |
| text-combine-upright | S | [HTML] |
| text-decoration | S | [HTML], [SVG] [1] |
| text-decoration-color | S | [HTML] |
| text-decoration-line | S | [HTML], [SVG] |
| text-decoration-skip | X | [HTML] |
| text-decoration-skip-box | X | [HTML] |
| text-decoration-skip-ink | X | [HTML], [SVG] |
| text-decoration-skip-inset | X | [HTML] |
| text-decoration-skip-self | X | [HTML] |
| text-decoration-skip-spaces | X | [HTML] |
| text-decoration-style | S | [HTML], [SVG] |
| text-decoration-thickness | S | [HTML], [SVG] |
| text-emphasis | S | [HTML], [SVG] |
| text-emphasis-color | S | [HTML], [SVG] |
| text-emphasis-position | S | [HTML], [SVG] |
| text-emphasis-skip | X | [HTML] |
| text-emphasis-style | S | [HTML], [SVG] |
| text-group-align | X | [HTML] |
| text-indent | S | [HTML] |
| text-justify | X | [HTML] |
| text-orientation | S | [HTML] |
| text-overflow | S | [HTML] |
| text-rendering | S | [HTML] [1], [SVG] |
| text-shadow | S | [HTML], [SVG] |
| text-size-adjust | X | [HTML] |
| text-space-collapse | D | [HTML] |
| text-space-trim | D | [HTML] |
| text-spacing | X | [HTML] |
| text-spacing-trim | X | [HTML] |
| text-transform | S | [HTML], [SVG] |
| text-underline-offset | S | [HTML], [SVG] |
| text-underline-position | S | [HTML], [SVG] |
| text-wrap | X | [HTML] |
| timeline-scope | X | [HTML] |
| top | S | [HTML] |
| touch-action | S | [HTML] |
| transform | S | [HTML], [SVG] |
| transform-box | S | [HTML], [SVG] |
| transform-origin | S | [HTML], [SVG] |
| transform-style | S | [HTML] |
| transition | S | [HTML] |
| transition-behavior | S | [HTML] |
| transition-delay | S | [HTML] |
| transition-duration | S | [HTML] |
| transition-property | S | [HTML] |
| transition-timing-function | S | [HTML] |
| translate | S | [HTML] |
| unicode-bidi | S | [HTML], [SVG] |
| user-select | S | [HTML] |
| vector-effect | X | [SVG] |
| vertical-align | S | [HTML] |
| view-timeline | X | [HTML] |
| view-timeline-axis | X | [HTML] |
| view-timeline-inset | X | [HTML] |
| view-timeline-name | X | [HTML] |
| view-transition-name | S | [HTML] |
| visibility | S | [HTML], [SVG] |
| voice-balance | X | [HTML] |
| voice-duration | X | [HTML] |
| voice-family | X | [HTML] |
| voice-pitch | X | [HTML] |
| voice-range | X | [HTML] |
| voice-rate | X | [HTML] |
| voice-stress | X | [HTML] |
| voice-volume | X | [HTML] |
| volume | D | [HTML] |
| white-space | S | [HTML] |
| white-space-collapse | S | [HTML] |
| white-space-trim | X | [HTML] |
| widows | S | [HTML] |
| width | S | [HTML], [SVG] |
| will-change | S | [HTML] |
| word-boundary-detection | X | [HTML] |
| word-boundary-expansion | D | [HTML] |
| word-break | S | [HTML] |
| word-space-transform | X | [HTML] |
| word-spacing | S | [HTML],[SVG] |
| word-wrap | S | [HTML] |
| wrap-after | X | [HTML] |
| wrap-before | X | [HTML] |
| wrap-inside | X | [HTML] |
| writing-mode | S | [HTML], [SVG] |
| x | S | [SVG] |
| y | S | [SVG] |
| z-index | S | [HTML] |
| zoom | X | [HTML] | 510 propriétés listées |