Sebelah kapsyen - Trik CSS

Anonim

The caption-sideharta di CSS membolehkan anda untuk menentukan di mana untuk meletakkan HTML ini

elemen, digunakan pada jadual HTML. Properti ini juga dapat diterapkan pada elemen apa pun yang sifatnya displayditetapkan caption-side.

table ( caption-side: top; )

Nilai

  • top: lalai. Letakkan kapsyen di bahagian atas meja.
  • bottom: meletakkan kapsyen di bahagian bawah meja.
  • inherit: menunjukkan bahawa nilai tersebut diwarisi dari caption-sidenilai induknya

The caption-sideharta boleh digunakan sama ada kepada


element or the

display table-caption text-align

Perhatikan bahawa nilai di atas caption-sideadalah berkaitan dengan mod penulisan jadual. Sebagai contoh, jika jadual ditetapkan ke mod penulisan menegak, maka nilai topdan bottomnilainya akan relatif terhadap arah jadual.

Demo di bawah ini menyertakan butang "toggle" yang menukar caption-sideharta meja antara topdan bottom, jadi anda dapat melihat perbezaannya menggunakan jadual dengan banyak baris data:

Lihat Pen
Demo harta sisi kapsyen oleh CSS-Tricks (@ css-tricks)
di CodePen.

Dalam demo seterusnya, writing-modeuntuk jadual ditetapkan ke vertical-rl. Seperti yang ditunjukkan oleh beralih menggunakan butang, nilai topdan bottomnilainya relatif dengan mod penulisan jadual:

Lihat Pen
Demo harta sisi kapsyen dengan mod penulisan yang berbeza oleh CSS-Tricks (@ css-tricks)
di CodePen.

Nilai Firefox sahaja yang tidak standard

Firefox telah lama menyokong, dan masih menyokong, empat nilai bukan standard untuk caption-side:

  • left: meletakkan kapsyen di sebelah kiri meja.
  • right: meletakkan kapsyen di sebelah kanan meja.
  • top-outside: meletakkan kapsyen di bahagian atas meja, dengan dimensinya tidak bergantung pada meja
  • bottom-outside: meletakkan kapsyen di bahagian bawah meja, dengan dimensinya tidak bergantung pada jadual

Demo di bawah hanya berfungsi di Firefox, dan membolehkan anda menggunakan empat butang untuk menetapkan nilai bukan standard yang berbeza:

Lihat
demo Pen -Firefox sahaja dari harta tanah kapsyen oleh CSS-Tricks (@ css-tricks)
di CodePen.

Nilai Piawai Baru

Dalam draf terbaru spesifikasi CSS itu, caption-sideharta adalah sebahagian daripada CSS Logical Properties Level 1 dan termasuk nilai-nilai block-start, block-end, inline-start, dan inline-end. Kedua dua sesuai dengan yang tidak standard leftdan rightnilai-nilai, dan hanya yang perlu disokong oleh ejen pengguna yang menyokong nilai-nilai yang tidak standard.

Maklumat lanjut

  • harta sisi kapsyen dalam spesifikasi CSS2.1
  • harta sisi kapsyen dalam spesifikasi CSS2.2
  • caption-side dalam CSS Logical Properties 1

Sokongan Penyemak Imbas

elemen, dengan kesan yang sama. Walaupun sifat ini akan mempengaruhi kedudukan kotak kapsyen secara keseluruhan (nilai kapsyen dihitung), ia tidak akan mempengaruhi penjajaran teks di dalam kotak. Teks di dalam kotak mungkin diselaraskan menggunakan properti.
Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 9.2+ 8+ 2.1+ 3.2+

Sokongan dalam jadual di atas merujuk kepada sokongan asas untuk standard topdan bottomnilai. Firefox juga tambahan menyokong bukan standard-the left, right, top-outside, dan bottom-outsidenilai-nilai. Tidak ada sokongan pelayar untuk baru block-start, block-end, inline-start, dan inline-endnilai-nilai.