contoh tetap meja CSS
Layout Jadual: Tetap akan memaksa lebar lajur jadual ditentukan oleh lebar sel baris pertama untuk mengelakkan kandungan yang mempengaruhi susun atur. 1. Tetapkan jadual-Layout: Tetapkan dan tentukan lebar jadual; 2. Tetapkan nisbah lebar lajur tertentu untuk baris pertama th/td; 3. Gunakan ruang putih: nowrap, limpahan: tersembunyi dan teks-overflow: ellipsis untuk mengawal limpahan teks; 4. Sesuai untuk pengurusan latar belakang, laporan data dan senario lain yang memerlukan susun atur yang stabil dan rendering berprestasi tinggi, yang secara efektif dapat menghalang susun atur susun atur dan meningkatkan kecekapan rendering.
Apabila menggunakan table-layout: fixed , CSS mengubah kaedah pengiraan lebar lajur jadual HTML, menjadikan susun atur jadual lebih diramalkan dan melakukan lebih baik. Berikut adalah table-layout: fixed dan terangkan peranan dan senario penggunaannya.
Apa itu table-layout: fixed ?
Secara lalai, table-layout jadual adalah auto , dan penyemak imbas secara automatik akan menyesuaikan lebar lajur mengikut kandungan. Selepas menetapkan untuk fixed , lebar lajur hanya ditentukan oleh lebar jadual dan lebar baris pertama sel . Kandungan sel berikutnya tidak akan menjejaskan lebar lajur, dengan itu meningkatkan prestasi rendering dan mengelakkan jitter susun atur.
Kod contoh
<! Doctype html>
<html lang = "zh">
<head>
<meta charset = "utf-8" />
<tirly> Contoh Layout Table Fixed </title>
<yaya>
.fixed-table {
Lebar: 100%;
meja berbaring: tetap; /* Kunci: Dayakan susun atur tetap*/
Sempadan-keruntuhan: runtuh;
font-family: arial, sans-serif;
}
. -baya meja,
.fixed-table td {
Sempadan: 1px pepejal #ccc;
Padding: 10px;
Teks-Align: Kiri;
Limpahan: Tersembunyi;
Teks-overflow: ellipsis;
ruang putih: nowrap; /* Mencegah pembungkus baris teks*/
}
.fixed-table th {
latar belakang warna: #f0f0f0;
}
/* Tetapkan lebar lajur secara manual*/
.fixed-table th: nth-child (1),
.fixed-table TD: nth-child (1) {
Lebar: 20%; / * Lajur pertama menyumbang 20% */
}
.fixed-table th: nth-child (2),
.fixed-table TD: nth-child (2) {
Lebar: 30%; / * Lajur kedua menyumbang 30% */
}
.fixed-table th: nth-child (3),
.fixed-table TD: nth-child (3) {
Lebar: 50%; / * Lajur ketiga menyumbang 50% */
}
</gaya>
</head>
<body>
<Table Class = "Tetap-Jable">
<head>
<tr>
<th> Nama </th>
<Th> Posisi </th>
<th> Catatan </th>
</tr>
</head>
<tbody>
<tr>
<td> Zhang San </td>
<td> Jurutera Pembangunan Front-End </td>
<td> Cemerlang dalam React and Vue, kod ini ditulis dengan baik </td>
</tr>
<tr>
<td> li si </td>
<td> pereka ui </td>
<td> Draf reka bentuk sempurna secara terperinci, dan sering kali masa lapang untuk mengubah suai lukisan </td>
</tr>
<tr>
<td> wang wu </td>
<td> penganalisis data </td>
<td> berjuta -juta data diproses setiap hari, dan generasi laporan automatik </td>
</tr>
</tbody>
</meja>
</body>
</html> Manfaat Menggunakan table-layout: fixed
- Susun atur yang stabil : Lebar lajur tidak akan berubah secara tiba -tiba kerana baris mempunyai kandungan yang terlalu panjang.
- Rendering lebih cepat : Penyemak imbas boleh menentukan lebar lajur tanpa membaca semua kandungan.
- Sesuai untuk jadual struktur tetap : seperti sistem pengurusan latar belakang, laporan data, dll.
- Adalah lebih baik untuk digunakan dengan
text-overflow: ellipsis: Teks panjang secara automatik memangkas ellipsis.
Perkara yang perlu diperhatikan
- Jadual mesti ditetapkan
width, jika tidak, susun aturfixedboleh dilakukan secara tidak normal. - Lebar lajur terutamanya ditentukan oleh sel -sel di baris pertama (biasanya
theadatau baris pertamatr) . Oleh itu, disyorkan untuk menetapkan lebar padatdthatau pertama. - Jika baris pertama tidak mempunyai set lebar, penyemak imbas akan mengedarkan lebar lajur secara merata.
- Apabila kandungan terlalu panjang, ingatlah untuk mengawal paparan dengan
white-space: nowrapdanoverflow: hidden.
Senario aplikasi biasa
- Borang Pengurusan Latar Belakang (seperti senarai pengguna, jadual pesanan)
- Antara muka paparan data dengan lebar lajur tetap
- Jadual yang memerlukan ellipsis untuk memotong teks panjang
- Jadual sensitif prestasi besar (beratus-ratus ribu baris)
Pada dasarnya itu sahaja. table-layout: fixed kelihatan seperti silap mata, tetapi sangat praktikal dalam pembangunan sebenar, terutama apabila anda tidak mahu "kandungan tambahan sel tertentu" untuk merosakkan susun atur meja keseluruhan.
Atas ialah kandungan terperinci contoh tetap meja CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1797
16
1750
56
1594
29
1475
72
267
587
Laravel Lazy Loading vs Memuatkan Bersemangat
Jul 28, 2025 am 04:23 AM
Lazy memuatkan hanya pertanyaan apabila mengakses persatuan dengan mudah boleh membawa kepada masalah n 1, yang sesuai untuk senario di mana data yang berkaitan tidak ditentukan sama ada ia diperlukan; 2. Kegunaan pemuatan kecemasan dengan () untuk memuatkan data yang berkaitan terlebih dahulu untuk mengelakkan pertanyaan n 1, yang sesuai untuk senario pemprosesan batch; 3. Pemuatan kecemasan harus digunakan untuk mengoptimumkan prestasi, dan masalah n 1 dapat dikesan melalui alat seperti Laraveldebugbar, dan $ dengan atribut model digunakan dengan teliti untuk mengelakkan overhead prestasi yang tidak perlu.
Penalaan Prestasi Pemetaan Objek (ORM) di PHP
Jul 29, 2025 am 05:00 AM
Elakkan masalah pertanyaan n 1, mengurangkan bilangan pertanyaan pangkalan data dengan memuatkan data yang berkaitan terlebih dahulu; 2. Pilih hanya medan yang diperlukan untuk mengelakkan memuat entiti lengkap untuk menjimatkan memori dan jalur lebar; 3. Gunakan strategi cache yang munasabah, seperti cache sekunder doktrin atau hasil pertanyaan frekuensi tinggi Cache; 4. Mengoptimumkan kitaran hayat entiti dan panggilan jelas () secara teratur untuk membebaskan memori untuk mengelakkan limpahan memori; 5. Memastikan indeks pangkalan data wujud dan menganalisis penyata SQL yang dihasilkan untuk mengelakkan pertanyaan yang tidak cekap; 6. Lumpuhkan penjejakan perubahan automatik dalam senario di mana perubahan tidak diperlukan, dan gunakan array atau mod ringan untuk meningkatkan prestasi. Penggunaan ORM yang betul memerlukan menggabungkan pemantauan SQL, caching, pemprosesan batch dan pengoptimuman yang sesuai untuk memastikan prestasi aplikasi sambil mengekalkan kecekapan pembangunan.
Menyelam jauh ke dalam mekanisme pengumpulan sampah dalaman PHP
Jul 28, 2025 am 04:44 AM
Mekanisme pengumpulan sampah PHP didasarkan pada penghitungan rujukan, tetapi rujukan bulat perlu diproses oleh pemungut sampah pekeliling berkala; 1. Rujukan kiraan rujukan segera memori apabila tidak ada rujukan kepada pembolehubah; 2. Rujukan rujukan menyebabkan memori tidak dapat dikeluarkan secara automatik, dan ia bergantung kepada GC untuk mengesan dan membersihkannya; 3. GC dicetuskan apabila zval "akar yang mungkin" mencapai ambang atau panggilan secara manual gc_collect_cycles (); 4. Aplikasi PHP jangka panjang harus memantau gc_status () dan hubungi gc_collect_cycles () dalam masa untuk mengelakkan kebocoran ingatan; 5. Amalan terbaik termasuk mengelakkan rujukan bulat, menggunakan gc_disable () untuk mengoptimumkan bidang utama prestasi, dan objek dereference melalui kaedah CLEAR () ORM.
Apakah Laravel Octane dan bilakah ia berguna?
Jul 28, 2025 am 04:13 AM
Laraveloctaneisusulforimprovingperformanceinhigh-traffic, latency rendah, orreal-timeapplicationsbykykeepingthelaravelframeworkloadinmemoryusingswooleorroadrunner.1.itexcelsinhigh-trafficapplicationsberververververvesponsetresponsetresponsetresponsetresponsetresponsetresponsetresponsetresponsetresponsetresponsetresponsetresponsetresponsetsetresponsetresponsetsetresponsetsetresponsetservesponsetresponsetservesponsetsetresponsetser
Revolusi tanpa pelayan: Menggunakan aplikasi PHP berskala dengan Bref
Jul 28, 2025 am 04:39 AM
Bref membolehkan pemaju PHP membina aplikasi yang berskala dan kos efektif tanpa menguruskan pelayan. 1.Bref membawa PHP ke Awslambda dengan menyediakan lapisan runtime PHP yang dioptimumkan, menyokong Php8.3 dan versi lain, dan dengan lancar mengintegrasikan dengan rangka kerja seperti Laravel dan Symfony; 2. Langkah -langkah penempatan termasuk: memasang Bref menggunakan komposer, mengkonfigurasi serverless.yml untuk menentukan fungsi dan peristiwa, seperti titik akhir HTTP dan perintah artisan; 3. Jalankan perintah ServerlessDeploy untuk melengkapkan penggunaan, secara automatik mengkonfigurasi apigeway dan menjana URL akses; 4. Bagi sekatan Lambda, Bref menyediakan penyelesaian.
Apa itu Laravel Octane?
Jul 28, 2025 am 04:12 AM
Laraveloctaneisaperformance-boostingpackagethatimprovesresponsetimesandthroughputbyservyvinglaravelapplicationsviaksviole, openswoole, orroadrunner.1.unliketraditionalphp-fpm, whoBootslaravereveryrequest, octaneldispon
Mengintegrasikan PHP dengan model pembelajaran mesin
Jul 28, 2025 am 04:37 AM
UsearestapitobridgePhpandMlmodelsbyrunningthemodelinpythonviaflaskorfastapiandcallingitfromphpusingcurlorguzzle.2.runpythonsc riptsdirectlyFromphpusingExec () ortshell_exec () forsimple, trafficusecases rendah, walaupunThisapproachhassecurityandperformancelimitat
Contoh pertanyaan SQL Raw Laravel
Jul 29, 2025 am 02:59 AM
Laravel menyokong penggunaan pertanyaan SQL asli, tetapi parameter mengikat harus lebih disukai untuk memastikan keselamatan; 1. Gunakan db :: pilih () untuk melaksanakan pertanyaan pilih dengan parameter mengikat untuk mencegah suntikan SQL; 2. Gunakan db :: kemas kini () untuk melaksanakan operasi kemas kini dan mengembalikan bilangan baris yang terjejas; 3. Gunakan db :: masukkan () untuk memasukkan data; 4. Gunakan db :: padam () untuk memadam data; 5. Gunakan db :: pernyataan () untuk melaksanakan pernyataan SQL tanpa set keputusan seperti membuat, mengubah, dan sebagainya; 6. Adalah disyorkan untuk menggunakan Whereraw, SelectRaw dan kaedah lain dalam QueryBuilder untuk menggabungkan ungkapan asli untuk meningkatkan keselamatan
