1、table样式首先设置表格边框,属性设置表格的边框是否被合并为一个单一的边框。 table{ border-collapse: collapse; border-spacing: 0;} 2、固定表头 2.1、原理:表头和表身分开,表身设置可滚动table-body{overflow-y:scr            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2018-09-05 20:54:00
                            
                                721阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            CSS Tables 
Configurations
Dual 1.8GHz
Dual 2GHz
Dual 2.5GHz
lipeng
M9454LL/A
M9455LL/A
M9457LL/A
mapabc
Dual 1.8GHz PowerPC G5
Dual 2GHz PowerPC G5
Dual 2.5GHz PowerPC G5
地图名片
900MHz per processor            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2011-01-20 10:39:00
                            
                                312阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            # HTML5 表格美化指南
在网页开发中,创建一个醒目的表格可以提升用户的体验。本文将教你如何利用HTML5和CSS来实现一个漂亮的表格样式,适合刚入行的小白们。
## 流程概述
首先,我们要明确实现漂亮HTML5表格的步骤。下面是整个流程的表格展示:
| 步骤        | 描述                       |
| ----------- | -----------            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2024-10-22 05:15:25
                            
                                809阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            <table style="width: 100%;margin-top:10px;border-collapse: collapse"> <tr> <td><label>设备id:</label></td> <td><label>设备名:</label></td> <td><label>设备编号:            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-04-06 14:06:00
                            
                                1105阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢
页面代码代码  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<HTML xmlns="htt            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2015-01-30 08:44:00
                            
                                221阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            <div class="test test-1"> <div class="scrollbar"></div> </div> .test { width : 50px; height : 200px; overflow: auto; float : left; margin : 5px; borde ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-08-12 15:09:00
                            
                                514阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            1. 单像素的边框CSS表格这是一个非常所用的表格风格。源码:<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.gridtable {
	font-family: verdana,arial,sans-serif;            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2015-06-18 17:12:00
                            
                                83阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            1. 单像素的边框CSS表格这是一个非常所用的表格风格。源码:	Info Header 1Info Header 2Info Header 3	Text 1AText 1BText 1C	Text 2AText 2BText 2C2. 带背景图的CSS样式表格和上面差点儿相同,只是每一个格子里多了背...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2015-06-16 19:59:00
                            
                                89阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            1. 单像素的边框CSS表格这是一个非常所用的表格风格。源码:	Info Header 1Info Header 2Info Header 3	Text 1AText 1BText 1C	Text 2AText 2BText 2C2. 带背景图的CSS样式表格和上面差点儿相同。只是每一个格子里多了背...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2015-06-18 20:22:00
                            
                                137阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            样式:代码:<html><head></head><style>    body{    	text-align: center;    }    .hcqFont{position:relative            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-01-16 17:35:37
                            
                                4412阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            效果图:方法一<table>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>住址</th>
        <th>电话</th>
    </tr>
    <tbody>
              
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-04-07 20:11:42
                            
                                4706阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            依照WEB2.0风格,设计了几个表格样式,希望大家喜欢。WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择。现在使用介绍使用CSS样式表来控制、美化表格的方法。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2013-05-29 00:47:00
                            
                                701阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            根据WEB2.0风格,设计了几个表格样式,我希望你喜欢。WEB2.0推广使用div开放式布局。但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择。本节将介绍如何使用现在CSS样式表来控制、的方法。精美的表格样式大家好。CSS与表格的结合演示样例点击链接切换样式:t1t2t3网名博客电邮网络...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2015-06-20 09:13:00
                            
                                652阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            依照WEB2.0风格,设计了几个表格样式,希望大家喜欢。WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择。现在介绍使用CSS样式表来控制、美化表格的方法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2013-06-21 14:24:00
                            
                                839阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            看到一篇挺实用的文章,这里收藏一下,方便以后使用。使用的时候把<form></form>标签的 class 替换成对应的 class 样式即可直接使用。表单代码:<form action="" method="post" class="STYLE-NAME">    <h1>Contact Form        &            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-07-15 10:30:42
                            
                                6500阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            样式如图,代码已在结尾,按照序号复制粘贴便可直接用了:代码:            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-01-17 11:05:12
                            
                                2906阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            WebKit内核浏览器效果:代码:<!DOCTYPE html><html><head><meta charset="utf-8"><style>.container {    height: 200px;    width: 600px;    overflow: auto;}.left_table {...            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2019-12-07 23:09:58
                            
                                145阅读
                            
                                                                             
                 
                
                                
                    