A caption-sidepropriedade em CSS permite que você defina onde posicionar o HTML
elemento, usado em tabelas HTML. Essa propriedade também pode ser aplicada a qualquer elemento cuja displaypropriedade esteja definida como caption-side.
table ( caption-side: top; )Valores
top: o padrão. Posiciona a legenda no topo da mesa.bottom: posiciona a legenda na parte inferior da tabela.inherit: indica que o valor é herdado docaption-sidevalor de seu pai
A caption-sidepropriedade pode ser aplicada ao
element or the
display table-caption text-align
Observe que os valores acima para caption-sidesão relativos ao modo de escrita da tabela. Por exemplo, se uma tabela for configurada para um modo de escrita vertical, os valores tope bottomserão relativos à direção da tabela.
A demonstração abaixo inclui um botão “alternar” que alterna a caption-sidepropriedade da tabela entre tope bottom, para que você possa ver a diferença usando uma tabela com muitas linhas de dados:
Veja o Pen
Demo da propriedade caption-side por CSS-Tricks (@ css-tricks)
em CodePen.
Na próxima demonstração, o writing-modepara a tabela é definido como vertical-rl. Conforme demonstrado ao alternar usando o botão, os valores tope bottomsão relativos ao modo de escrita da tabela:
Veja o Pen
Demo da propriedade caption-side com diferentes modos de escrita por CSS-Tricks (@ css-tricks)
em CodePen.
Valores não padrão somente do Firefox
O Firefox oferece suporte há muito tempo, e ainda oferece suporte, a quatro valores não padrão para caption-side:
left: posiciona a legenda à esquerda da tabela.right: posiciona a legenda à direita da mesa.top-outside: posiciona a legenda no topo da mesa, com suas dimensões independentes da mesabottom-outside: posiciona a legenda na parte inferior da tabela, com suas dimensões independentes da tabela
A demonstração abaixo funciona apenas no Firefox e permite que você use quatro botões para definir os diferentes valores fora do padrão:
Veja a
demonstração da propriedade caption-side da Caneta apenas no Firefox por CSS-Tricks (@ css-tricks)
em CodePen.
Novos Valores Padrão
Nos últimos rascunhos da especificação CSS, a caption-sidepropriedade faz parte de CSS Logical Propriedades de nível 1 e inclui os valores block-start, block-end, inline-start, e inline-end. Os dois últimos correspondem aos valores não padrão lefte rightdevem ser suportados apenas por agentes de usuário que suportam esses valores não padrão.
Mais Informações
- propriedade caption-side na especificação CSS2.1
- propriedade caption-side na especificação CSS2.2
- lado da legenda em propriedades lógicas CSS 1
Suporte para navegador
elemento, com o mesmo efeito. Embora essa propriedade afete a posição da caixa de legenda como um todo (o valor de uma legenda é calculado para), ela não afetará o alinhamento do texto dentro da caixa. O texto dentro da caixa pode ser alinhado usando a propriedade.| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 9,2+ | 8+ | 2.1+ | 3,2+ |
O suporte na tabela acima se refere ao suporte básico para o padrão tope bottomvalores. Firefox também suporta adicionalmente a não-padrão left, right, top-outside, e bottom-outsidevalores. Não há suporte ao navegador para os novos block-start, block-end, inline-start, e inline-endvalores.