Sisi teks - Trik CSS

Anonim

The caption-sideproperti di CSS memungkinkan Anda untuk menentukan dimana posisi HTML

elemen, digunakan pada tabel HTML. Properti ini juga dapat diterapkan ke elemen apa pun yang displaypropertinya disetel ke caption-side.

table ( caption-side: top; )

Nilai

  • top: default. Posisikan caption di bagian atas tabel.
  • bottom: memposisikan keterangan di bagian bawah tabel.
  • inherit: menunjukkan bahwa nilai diwarisi dari caption-sidenilai induknya

The caption-sideproperti dapat diterapkan baik pada


element or the

display table-caption text-align

Perhatikan bahwa nilai di atas caption-sideadalah relatif terhadap mode penulisan tabel. Misalnya, jika tabel diatur ke mode penulisan vertikal, nilai topdan bottomakan sesuai dengan arah tabel.

Demo di bawah menyertakan tombol "beralih" yang mengalihkan caption-sideproperti tabel antara topdan bottom, sehingga Anda dapat melihat perbedaannya menggunakan tabel dengan banyak baris data:

Lihat
Demo Pena properti sisi teks oleh CSS-Tricks (@ css-trick)
di CodePen.

Di demo berikutnya, writing-modeuntuk tabel diatur ke vertical-rl. Seperti yang ditunjukkan dengan beralih menggunakan tombol, nilai topdan bottomrelatif terhadap mode penulisan tabel:

Lihat
Demo Pena properti sisi teks dengan mode penulisan berbeda oleh CSS-Tricks (@ css-trick)
di CodePen.

Nilai Non-standar khusus Firefox

Firefox telah lama mendukung, dan masih mendukung, empat nilai non-standar untuk caption-side:

  • left: memposisikan judul di sebelah kiri tabel.
  • right: memosisikan keterangan di sebelah kanan tabel.
  • top-outside: memosisikan keterangan di bagian atas tabel, dengan dimensinya tidak bergantung pada tabel
  • bottom-outside: memposisikan keterangan di bagian bawah tabel, dengan dimensinya tidak tergantung pada tabel

Demo di bawah ini hanya berfungsi di Firefox, dan memungkinkan Anda menggunakan empat tombol untuk menyetel nilai non-standar yang berbeda:

Lihat
demo khusus Pen Firefox dari properti sisi teks oleh CSS-Tricks (@ css-trick)
di CodePen.

Nilai Standar Baru

Dalam draft terbaru dari spesifikasi CSS, yang caption-sideproperti merupakan bagian dari CSS Logical Properti Level 1 dan termasuk nilai-nilai block-start, block-end, inline-start, dan inline-end. Dua yang terakhir sesuai dengan non-standar leftdan rightnilai, dan hanya perlu didukung oleh agen pengguna yang mendukung nilai non-standar tersebut.

Informasi Lebih Lanjut

  • properti sisi teks dalam spesifikasi CSS2.1
  • properti sisi teks dalam spesifikasi CSS2.2
  • caption-side di CSS Logical Properties 1

Dukungan Browser

elemen, dengan efek yang sama. Meskipun properti ini akan memengaruhi posisi kotak teks secara keseluruhan (nilai teks dihitung), properti ini tidak akan memengaruhi perataan teks di dalam kotak. Teks di dalam kotak dapat disejajarkan menggunakan properti.
Chrome Safari Firefox Opera YAITU Android iOS
1+ 1+ 1+ 9.2+ 8+ 2.1+ 3.2+

Dukungan pada tabel di atas mengacu pada dukungan dasar untuk standar topdan bottomnilai. Firefox juga tambahan mendukung non-standar left, right, top-outside, dan bottom-outsidenilai-nilai. Tidak ada dukungan browser untuk baru block-start, block-end, inline-start, dan inline-endnilai-nilai.