Rumah hujung hadapan web html tutorial 详解table设置表格有滚动条实例

详解table设置表格有滚动条实例

Jun 24, 2017 am 10:22 AM
table tatal lembaran sediakan

table 设置表格有滚动条。

少说多做,代码中有注释:

 1 <!DOCTYPE HTML> 
 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6         
 <title>设置表格有滚动条</title> 7         
 <style> 8             
 * { 9                 margin: 0;                 
 padding: 0;11             }
              table {               
              /*设置相邻单元格的边框间的距离*/                 
              border-spacing: 0;16                 /*表格设置合并边框模型*/          
                    border-collapse: collapse;18                 
                    text-align: center;19             }          
                    /*关键设置 tbody出现滚动条*/21             table tbody {   
                                  display: block;23                 
                                  height: 80px;               
                                  overflow-y: scroll;25             }
                                           table thead,            
                                           tbody tr {
                                                        
                                                        display: table;30                 width: 100%;31     
                                                                   
                                                        table-layout: fixed;32             }33             /*关键设置:滚动条默认宽度是16px 将thead的宽度减16px*/34             table thead {35                 width: calc( 100% - 1em)36             }37             38             39             table thead th {40                 background: #ccc;41             }42             43         </style>44     </head>45 46     <body>47         <table width="80%" border="1">48             <thead>49                 <tr>50                     <th>姓名</th>51                     <th>年龄</th>52                     <th>出生年月</th>53                     <th>手机号码</th>54                     <th>单位</th>55                 </tr>56             </thead>57             <tbody>58                 <tr>59                     <td>张三</td>60                     <td>18</td>61                     <td>1990-9-9</td>62                     <td>13682299090</td>63                     <td>阿里巴巴</td>64                 </tr>65                 <tr>66                     <td>李四</td>67                     <td>18</td>68                     <td>1990-9-9</td>69                     <td>13682299090</td>70                     <td>阿里巴巴与四十大盗</td>71                 </tr>72                 <tr>73                     <td>王五</td>74                     <td>18</td>75                     <td>1990-9-9</td>76                     <td>13682299090</td>77                     <td>腾讯科技</td>78                 </tr>79                 <tr>80                     <td>孟想</td>81                     <td>18</td>82                     <td>1990-9-9</td>83                     
                                                        <td>13682299090</td>
                                                                            
                                                        <td>浏阳河就业</td>85                 
                                                        </tr>86             
                                                        </tbody>87         
                                                        </table>88     </body>89 90 </html>
Salin selepas log masuk

效果:

 

Atas ialah kandungan terperinci 详解table设置表格有滚动条实例. 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

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

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)

Langkah-langkah melaraskan format gambar yang disisipkan dalam jadual PPT Langkah-langkah melaraskan format gambar yang disisipkan dalam jadual PPT Mar 26, 2024 pm 04:16 PM

1. Buat fail PPT baharu dan namakannya [Petua PPT] sebagai contoh. 2. Klik dua kali [Petua PPT] untuk membuka fail PPT. 3. Masukkan jadual dengan dua baris dan dua lajur sebagai contoh. 4. Klik dua kali pada sempadan jadual, dan pilihan [Reka Bentuk] akan muncul pada bar alat atas. 5. Klik pilihan [Shading] dan klik [Picture]. 6. Klik [Gambar] untuk muncul kotak dialog pilihan isi dengan gambar sebagai latar belakang. 7. Cari dulang yang anda ingin masukkan dalam direktori dan klik OK untuk memasukkan gambar. 8. Klik kanan pada kotak jadual untuk memaparkan kotak dialog tetapan. 9. Klik [Format Cells] dan semak [Imej jubin sebagai teduhan]. 10. Tetapkan [Pusat], [Mirror] dan fungsi lain yang anda perlukan, dan klik OK. Nota: Lalai adalah untuk gambar diisi dalam jadual

Bagaimana untuk menetapkan masa yang dijadualkan untuk menerbitkan karya di Douyin? Bagaimanakah ia menetapkan tempoh video? Bagaimana untuk menetapkan masa yang dijadualkan untuk menerbitkan karya di Douyin? Bagaimanakah ia menetapkan tempoh video? Mar 27, 2024 pm 06:11 PM

Menerbitkan karya di Douyin boleh menarik lebih banyak perhatian dan suka, tetapi kadangkala sukar bagi kami untuk menerbitkan karya dalam masa nyata Dalam kes ini, kami boleh menggunakan fungsi keluaran berjadual Douyin. Fungsi penerbitan berjadual Douyin membolehkan pengguna menerbitkan karya secara automatik pada masa yang dijadualkan, yang boleh merancang pelan keluaran dengan lebih baik dan meningkatkan pendedahan serta pengaruh karya tersebut. 1. Bagaimana untuk menetapkan masa yang dijadualkan untuk penerbitan karya di Douyin? Untuk menetapkan masa keluaran yang dijadualkan, mula-mula pergi ke halaman utama peribadi Douyin, cari butang "+" di penjuru kanan sebelah atas dan klik untuk memasuki halaman keluaran. Terdapat ikon jam di penjuru kanan sebelah bawah halaman penerbitan Klik untuk memasuki antara muka penerbitan yang dijadualkan. Dalam antara muka, anda boleh memilih jenis kerja yang ingin anda terbitkan, termasuk video pendek, video panjang dan siaran langsung. Seterusnya, anda perlu menetapkan masa untuk karya anda diterbitkan. TikTok menyediakan

Bagaimana untuk menetapkan nilai WPS untuk menukar warna secara automatik mengikut syarat_Langkah untuk menetapkan nilai jadual WPS untuk menukar warna secara automatik mengikut keadaan Bagaimana untuk menetapkan nilai WPS untuk menukar warna secara automatik mengikut syarat_Langkah untuk menetapkan nilai jadual WPS untuk menukar warna secara automatik mengikut keadaan Mar 27, 2024 pm 07:30 PM

1. Buka lembaran kerja dan cari butang [Start]-[Conditional Formatting]. 2. Klik Pemilihan Lajur dan pilih lajur yang mana pemformatan bersyarat akan ditambahkan. 3. Klik butang [Pemformatan Bersyarat] untuk memaparkan menu pilihan. 4. Pilih [Serlahkan peraturan bersyarat]-[Antara]. 5. Isikan peraturan: 20, 24, teks hijau tua dengan warna isian gelap. 6. Selepas pengesahan, data dalam lajur yang dipilih akan diwarnakan dengan nombor, teks dan kotak sel yang sepadan mengikut tetapan. 7. Peraturan bersyarat tanpa konflik boleh ditambah berulang kali, tetapi untuk peraturan bercanggah WPS akan menggantikan peraturan bersyarat yang ditetapkan sebelum ini dengan peraturan tambahan terakhir. 8. Tambah lajur sel berulang kali selepas [Antara] peraturan 20-24 dan [Kurang daripada] 20. 9. Jika anda perlu menukar peraturan, anda boleh mengosongkan peraturan dan kemudian menetapkan semula peraturan.

Di manakah set tag Douyin? Bagaimanakah ia boleh ditag supaya ia boleh ditolak dengan tepat? Di manakah set tag Douyin? Bagaimanakah ia boleh ditag supaya ia boleh ditolak dengan tepat? Mar 27, 2024 am 11:01 AM

Sebagai salah satu platform video pendek paling popular di dunia, Douyin membenarkan semua orang menjadi pencipta dan berkongsi setiap detik kehidupan. Bagi pengguna Douyin, tag adalah fungsi yang sangat penting Ia boleh membantu pengguna mengklasifikasikan dan mendapatkan semula kandungan dengan lebih baik, dan juga membolehkan platform untuk menolak kandungan yang sesuai kepada pengguna dengan lebih tepat. Jadi, di manakah tag Douyin ditetapkan? Artikel ini akan menerangkan secara terperinci cara menyediakan dan menggunakan teg pada Douyin. 1. Di manakah set tag Douyin? Menggunakan teg pada Douyin boleh membantu pengguna mengklasifikasikan dan melabelkan karya mereka dengan lebih baik, menjadikannya lebih mudah untuk pengguna lain mencari dan mengikutinya. Kaedah untuk menetapkan label adalah seperti berikut: 1. Buka APP Douyin dan log masuk ke akaun anda. 2. Klik tanda "+" di bahagian bawah skrin dan pilih butang "Terbitkan". 3.

Cara menyediakan penerbitan berjadual di Weibo_Tutorial tentang cara menyediakan penerbitan berjadual di Weibo Cara menyediakan penerbitan berjadual di Weibo_Tutorial tentang cara menyediakan penerbitan berjadual di Weibo Mar 29, 2024 pm 03:51 PM

1. Buka klien Weibo, klik tiga titik kecil pada halaman penyuntingan, dan kemudian klik Siaran Berjadual. 2. Selepas mengklik pada penerbitan berjadual, akan ada pilihan masa di sebelah kanan masa penerbitan Tetapkan masa, edit artikel dan klik perkataan kuning di sudut kanan bawah untuk menerbitkan secara kerap. 3. Versi mudah alih Weibo pada masa ini tidak menyokong penerbitan berjadual Fungsi ini hanya boleh digunakan pada klien PC!

Mod Jangan Ganggu Tidak Berfungsi dalam iPhone: Betulkan Mod Jangan Ganggu Tidak Berfungsi dalam iPhone: Betulkan Apr 24, 2024 pm 04:50 PM

Malah menjawab panggilan dalam mod Jangan Ganggu boleh menjadi pengalaman yang sangat menjengkelkan. Seperti namanya, mod Jangan Ganggu mematikan semua pemberitahuan panggilan masuk dan makluman daripada e-mel, mesej, dsb. Anda boleh mengikuti set penyelesaian ini untuk membetulkannya. Betulkan 1 – Dayakan Mod Fokus Dayakan mod fokus pada telefon anda. Langkah 1 – Leret ke bawah dari atas untuk mengakses Pusat Kawalan. Langkah 2 – Seterusnya, dayakan “Mod Fokus” pada telefon anda. Mod Fokus mendayakan mod Jangan Ganggu pada telefon anda. Ia tidak akan menyebabkan sebarang makluman panggilan masuk muncul pada telefon anda. Betulkan 2 – Tukar Tetapan Mod Fokus Jika terdapat beberapa isu dalam tetapan mod fokus, anda harus membetulkannya. Langkah 1 – Buka tetingkap tetapan iPhone anda. Langkah 2 – Seterusnya, hidupkan tetapan mod Fokus

Tempat untuk menetapkan cadangan dan pilihan Douyin Tempat untuk menetapkan cadangan dan pilihan Douyin Mar 27, 2024 pm 05:06 PM

Di manakah cadangan dan pilihan pada Douyin? Dalam video pendek Douyin, terdapat dua kategori: pemilihan dan pengesyoran Kebanyakan pengguna tidak tahu cara menyediakan cadangan dan pilihan Seterusnya ialah video pendek Douyin yang dibawa oleh editor kepada pengguna. Cadangan audio dan tutorial kaedah tetapan terpilih, pengguna yang berminat datang dan lihat! Tutorial penggunaan Douyin Tempat untuk menyediakan cadangan dan pilihan Douyin 1. Mula-mula buka APP video pendek Douyin dan masukkan halaman utama, klik pada kawasan [Saya] di sudut kanan bawah dan pilih [tiga garisan mendatar] di sudut kanan atas ; 2. Kemudian di sebelah kanan Bar fungsi akan berkembang, luncurkan halaman untuk memilih [Tetapan] di bahagian bawah 3. Kemudian pada halaman fungsi tetapan, cari perkhidmatan [Pengurusan Maklumat Peribadi] 4. Akhirnya lompat ke peribadi halaman pengurusan maklumat, slaid [Syor Kandungan Diperibadikan] 】Butang di bahagian belakang boleh ditetapkan.

Bagaimana untuk menetapkan kira detik untuk merebut tiket di Damai Bagaimana untuk menetapkan kira detik untuk merebut tiket di Damai Apr 01, 2024 pm 07:01 PM

Apabila membeli tiket di Damai.com, untuk memastikan masa pembelian tiket dapat difahami dengan tepat, pengguna boleh menetapkan jam terapung untuk merebut tiket Kaedah tetapan terperinci di bawah, mari kita belajar bersama. Cara mengikat jam terapung ke Damai 1. Klik untuk membuka aplikasi jam terapung pada telefon anda untuk memasuki antara muka, dan klik pada lokasi di mana cek jualan kilat ditetapkan, seperti yang ditunjukkan dalam rajah di bawah: 2. Selepas datang ke halaman menambah rekod baru, klik pada Damai.com Salin halaman pautan pembelian tiket yang disalin. 3. Seterusnya, tetapkan masa jualan kilat dan masa pemberitahuan di bawah, hidupkan butang suis di belakang [Simpan ke Kalendar] dan klik [Simpan] di bawah. 4. Klik untuk menghidupkan [Countdown], seperti yang ditunjukkan dalam rajah di bawah: 5. Apabila masa peringatan tiba, klik butang [Start Picture-in-Picture] di bawah. 6. Apabila tiba masa pembelian tiket

See all articles