Rumah hujung hadapan web html tutorial 怎样可以固定table的宽度 table-layout: fixed

怎样可以固定table的宽度 table-layout: fixed

Feb 02, 2018 am 10:14 AM
table tetap lebar

这次给大家带来怎样可以固定table的宽度 table-layout: fixed,固定table的宽度 table-layout: fixed的注意事项有哪些,下面就是实战案例,一起来看一下。

为了让表格能够填充屏幕(剩余空白区域),常将其宽度属性定义为:100%,单元格也是用百分数来定义。

但这样就会出现问题: 如果单元格中的文本超过宽度限制,就会自动换行,高度自动增高,导致整个表格的样式参差不齐,很难看。

很容易想到的解决方法是,禁用文本换行: white-space:nowrap; overflow:hidden;

So easy! 但效果仍然出乎意料:文本全部在一行显示,宽度自动加宽,甚至还超出了父容器,overflow完全没有起作用!

怎么回事? 百分比的原因么? 但是如果使用静态的固定宽度,就失去了表格的灵活性。

于是乎,不费吹飞之力地找到了终极解决方案: 固定表格宽度: table-layout: fixed;

顺便做了个简易的效果图,参考下: 

7.png

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

怎样让html的下拉菜单提交后保留选中值不返回默认值

分割线hr在不同浏览器中有什么区别

Atas ialah kandungan terperinci 怎样可以固定table的宽度 table-layout: fixed. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya Tukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya Mar 25, 2024 am 09:36 AM

Apabila mencipta mesin maya, anda akan diminta untuk memilih jenis cakera, anda boleh memilih cakera tetap atau cakera dinamik. Bagaimana jika anda memilih cakera tetap dan kemudian menyedari bahawa anda memerlukan cakera dinamik, atau sebaliknya. Anda boleh menukar satu kepada yang lain? Dalam siaran ini, kita akan melihat cara menukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya. Cakera dinamik ialah cakera keras maya yang pada mulanya mempunyai saiz kecil dan membesar dalam saiz semasa anda menyimpan data dalam mesin maya. Cakera dinamik sangat cekap dalam menjimatkan ruang storan kerana ia hanya mengambil sebanyak mungkin ruang storan hos seperti yang diperlukan. Walau bagaimanapun, apabila kapasiti cakera berkembang, prestasi komputer anda mungkin terjejas sedikit. Cakera tetap dan cakera dinamik biasanya digunakan dalam mesin maya

Bagaimana untuk menetapkan kertas dinding skrin kunci komputer yang tidak akan berubah Bagaimana untuk menetapkan kertas dinding skrin kunci komputer yang tidak akan berubah Jan 17, 2024 pm 03:24 PM

Secara umumnya, corak latar belakang desktop komputer boleh dilaraskan oleh pengguna. Walau bagaimanapun, bagi sesetengah pengguna Windows 10, mereka mahu dapat membetulkan imej latar belakang desktop pada komputer mereka, tetapi mereka tidak tahu cara untuk menetapkannya. Malah, ia sangat mudah dan mudah dikendalikan. Cara membetulkan kertas dinding skrin kunci komputer tanpa mengubahnya 1. Klik kanan gambar yang anda ingin tetapkan dan pilih Tetapkan sebagai gambar latar belakang 2. Win+R untuk membuka dan menjalankan, kemudian masukkan "gpedit.msc" 3. Kembangkan ke: Konfigurasi Pengguna - Templat Pengurusan - Panel Kawalan - Pemperibadian 4. Klik Pemperibadian, dan kemudian pilih "Cegah perubahan pada latar belakang desktop" 5. Pilih Didayakan 6. Kemudian buka tetapan dan masukkan latar belakang Apabila anda melihat perkataan kecil ini, ia bermakna ia telah ditetapkan.

Cara memastikan panel widget sentiasa kelihatan dalam Windows 11 Cara memastikan panel widget sentiasa kelihatan dalam Windows 11 Aug 13, 2023 pm 07:13 PM

Bagaimana untuk sentiasa menunjukkan papan widget semasa membuka Windows 11? Nah, anda boleh mulakan dengan memuat turun dan memasang kemas kini Windows terkini. Dalam tampung kemas kini terbaharu untuk Program Insider, Microsoft mendedahkan bahawa pengguna dalam saluran Pembangunan dan Canary akan dapat menyemat papan widget terbuka supaya ia sentiasa kelihatan sepintas lalu. Cara Sentiasa Tunjukkan Papan Widget Terbuka dalam Windows 11 Menurut Microsoft, untuk menyemat papan untuk dibuka, cuma klik pada ikon tekan tekan di sudut kanan atas papan. Setelah papan anda disematkan terbuka, papan widget tidak akan mengabaikan penutupan lagi. Semasa papan disematkan, anda masih boleh menutupnya dengan membuka papan widget melalui butang Widget pada bar tugas. apabila widget

Bagaimana untuk menyematkan nota komputer pada desktop Bagaimana untuk menyematkan nota komputer pada desktop Feb 15, 2024 pm 04:00 PM

Sistem pengendalian Windows 10 prabenam dengan fungsi nota yang mudah supaya pengguna yang dihargai boleh menulis nota atau mesej sementara mengikut kehendak mereka. Katakan anda ingin menggunakan ini sebagai alat untuk mencari dan menggunakan nota melekit dengan cepat dan mudah, atau anda ingin menyematkan program kecil praktikal ini di tengah-tengah skrin besar untuk rujukan mudah Anda boleh merealisasikan hasrat di atas hanya dalam beberapa perkara mudah langkah: Cara menyemat nota melekit pada komputer anda Pada desktop 1. Klik Mula dan kemudian klik nota lekit di sini 2. Selepas membuka nota lekat, anda boleh terus memasukkan kandungan yang sepadan di sini, dan anda juga boleh mengklik tanda tambah di atas untuk menambah kandungan baharu 3. Jika anda ingin menggunakan pihak ketiga Jika anda mempunyai perisian pengambilan nota, anda boleh memasukkan tetapan perisian yang sepadan untuk beroperasi.

Cara menggunakan komponen jadual vue3 Cara menggunakan komponen jadual vue3 May 12, 2023 pm 09:40 PM

Jadual asas Sebelum membangunkan komponen jadual, fikirkan dahulu gaya API yang hendak digunakan Oleh kerana pengarang menggunakan elemen dalam kerja pengeluaran, gaya komponen sebelumnya adalah serupa dengan elemen, tetapi kali ini saya tidak bercadang untuk menggunakan gaya elemen. . , saya bercadang untuk menukarnya dan memaparkannya secara langsung: Kami mengharapkan pengguna menggunakannya seperti ini: constdataList=[{id:1,name:'"Amalan Aplikasi JavaEE Enterprise"',author:'dev1ce',price:'10.22 ', desc:&# 3

Mengapa kedudukan tetap bahagian hadapan boleh menghasilkan analisis kesan dinamik Mengapa kedudukan tetap bahagian hadapan boleh menghasilkan analisis kesan dinamik Feb 02, 2024 pm 12:09 PM

Kedudukan tetap bahagian hadapan ialah sifat CSS biasa yang boleh membetulkan elemen pada kedudukan tertentu pada halaman dan tidak mengubah kedudukannya semasa halaman menatal. Tidak seperti kedudukan biasa, kedudukan kedudukan tetap pada halaman adalah relatif kepada viewport, bukan relatif kepada elemen induk. Kesan kedudukan tetap ini adalah lebih menarik dengan tepat kerana sifatnya yang dinamik. Sebab utama kedudukan tetap menghasilkan kesan dinamik adalah seperti berikut: Kesan tatal: Apabila halaman menatal, elemen kedudukan tetap tidak akan menatal bersama halaman, tetapi kekal dalam kedudukan tetap. ini

Bagaimana untuk menyelesaikan masalah bahawa menu permulaan win11 tidak boleh diperbaiki Bagaimana untuk menyelesaikan masalah bahawa menu permulaan win11 tidak boleh diperbaiki Jan 06, 2024 pm 08:09 PM

Ramai rakan suka membuka perisian secara terus dalam menu mula, yang memerlukan terus menyematkan aplikasi padanya Namun, mereka mendapati bahawa mereka tidak boleh disematkan ke menu mula dalam win11 Ini mungkin kerana kami salah lihat kaedah yang betul di bawah. Apa yang perlu dilakukan jika menu mula win11 tidak boleh diperbaiki 1. Mula-mula, kita klik butang carian dalam bar tugas di bawah. 2. Selepas membukanya, cari aplikasi yang anda ingin pin di bahagian atas, dan apabila anda menemuinya, klik "Sematkan ke Skrin Mula" di sebelah kanan. 3. Tunggu sistem memaparkan ikon untuk menyemat gesaan. 4. Selepas selesai, anda akan mendapati bahawa program yang dipilih telah disematkan ke menu mula.

Penyelesaian kepada bar navigasi Vue membetulkan masalah Penyelesaian kepada bar navigasi Vue membetulkan masalah Jun 30, 2023 am 10:52 AM

Cara menangani masalah bar navigasi tetap yang dihadapi dalam pembangunan Vue Apabila membangunkan halaman web, kesan tetap bar navigasi adalah keperluan yang sangat biasa. Semasa pengguna menatal halaman, bar navigasi boleh kekal dalam kedudukan tetap supaya pengguna boleh mengakses bahagian lain halaman dengan mudah. Walau bagaimanapun, dalam pembangunan Vue, disebabkan struktur aplikasi satu halaman khasnya, masalah membetulkan bar navigasi mungkin sedikit berbeza. Dalam artikel ini, kami akan memperkenalkan beberapa kaedah untuk menangani masalah tetap bar navigasi yang dihadapi dalam pembangunan Vue. Kaedah 1: Gunakan CSS untuk menetapkan kedudukan (posit

See all articles