首页 >web前端 >html教程 >table tbody 加横向滚动条_html/css_WEB-ITnose

table tbody 加横向滚动条_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:38:421820浏览

想在table tbody加一个横向滚动条


但是加上去了以后做成的网格线变的乱七入槽的。

正常是这种网格在它的tbody下面加一个横向滚动条


代码---------------------------------------------------

CSS:




html:------------------------------------------------------------------------------------------------------------------------------------------

  


  
    
      
        
      
    
    
      
        
        
        
        
        
        
        
        
        
        
        
        
      
      
        
        
        
        
        
        
        
        
        
        
        
        
      
      
        
        
        
        
        
        
        
        
        
        
        
        
      
      
        
        
        
        
        
        
        
        
        
        
        
        
      
      
        
        
        
        
        
        
        
        
        
        
        
        
      
    
  
产品编码table tbody 加横向滚动条_html/css_WEB-ITnose 产品名称table tbody 加横向滚动条_html/css_WEB-ITnose 规格型号table tbody 加横向滚动条_html/css_WEB-ITnose 助记码table tbody 加横向滚动条_html/css_WEB-ITnose 品牌table tbody 加横向滚动条_html/css_WEB-ITnose 品类table tbody 加横向滚动条_html/css_WEB-ITnose 上市时间table tbody 加横向滚动条_html/css_WEB-ITnose 条码前缀table tbody 加横向滚动条_html/css_WEB-ITnose 凑整数量table tbody 加横向滚动条_html/css_WEB-ITnose 毛重table tbody 加横向滚动条_html/css_WEB-ITnose 净重table tbody 加横向滚动条_html/css_WEB-ITnose 体积table tbody 加横向滚动条_html/css_WEB-ITnose
 JYZ-V5043 Joyoung/九阳 JYZ-V5原汁机慢速榨汁机家用低速多功能电动果汁机 JYZ-V5 JYZ 九阳 果汁机 2014-09-08 0908 4 0.989 0.919 0.867
 JYZ-V5043 Joyoung/九阳 JYZ-V5原汁机慢速榨汁机家用低速多功能电动果汁机 JYZ-V5 JYZ 九阳 果汁机 2014-09-08 0908 4 0.989 0.919 0.867
 JYZ-V5043 Joyoung/九阳 JYZ-V5原汁机慢速榨汁机家用低速多功能电动果汁机 JYZ-V5 JYZ 九阳 果汁机 2014-09-08 0908 4 0.989 0.919 0.867
 JYZ-V5043 Joyoung/九阳 JYZ-V5原汁机慢速榨汁机家用低速多功能电动果汁机 JYZ-V5 JYZ 九阳 果汁机 2014-09-08 0908 4 0.989 0.919 0.867
 
  


回复讨论(解决方案)

.newtable tr {
 /*display:table-row;*/
  display: inline-flex;
 border-left: 1px solid #999;
 border-top: 1px solid #999;*/
 }
去掉第二行的注释结束标记





    
        
            
        
        
            
                
                
                
                
                
                
                
                
                
                
                
                
            
            
                
                
                
                
                
                
                
                
                
                
                
                
            
            
                
                
                
                
                
                
                
                
                
                
                
                
            
            
                
                
                
                
                
                
                
                
                
                
                
                
            
            
                
                
                
                
                
                
                
                
                
                
                
                
            
        
    
产品编码table tbody 加横向滚动条_html/css_WEB-ITnose 产品名称table tbody 加横向滚动条_html/css_WEB-ITnose 规格型号table tbody 加横向滚动条_html/css_WEB-ITnose 助记码table tbody 加横向滚动条_html/css_WEB-ITnose 品牌table tbody 加横向滚动条_html/css_WEB-ITnose 品类table tbody 加横向滚动条_html/css_WEB-ITnose 上市时间table tbody 加横向滚动条_html/css_WEB-ITnose 条码前缀table tbody 加横向滚动条_html/css_WEB-ITnose 凑整数量table tbody 加横向滚动条_html/css_WEB-ITnose 毛重table tbody 加横向滚动条_html/css_WEB-ITnose 净重table tbody 加横向滚动条_html/css_WEB-ITnose 体积table tbody 加横向滚动条_html/css_WEB-ITnose
 JYZ-V5043 Joyoung/九阳 JYZ-V5原汁机慢速榨汁机家用低速多功能电动果汁机 JYZ-V5 JYZ 九阳 果汁机 2014-09-08 0908 4 0.989 0.919 0.867
 JYZ-V5043 Joyoung/九阳 JYZ-V5原汁机慢速榨汁机家用低速多功能电动果汁机 JYZ-V5 JYZ 九阳 果汁机 2014-09-08 0908 4 0.989 0.919 0.867
 JYZ-V5043 Joyoung/九阳 JYZ-V5原汁机慢速榨汁机家用低速多功能电动果汁机 JYZ-V5 JYZ 九阳 果汁机 2014-09-08 0908 4 0.989 0.919 0.867
 JYZ-V5043 Joyoung/九阳 JYZ-V5原汁机慢速榨汁机家用低速多功能电动果汁机 JYZ-V5 JYZ 九阳 果汁机 2014-09-08 0908 4 0.989 0.919 0.867

.newtable tr {
 /*display:table-row;*/
  display: inline-flex;
 border-left: 1px solid #999;
 border-top: 1px solid #999;*/
 }
去掉第二行的注释结束标记



也就是整行的都不要?那就没有滚动条了。


.newtable tr {
 /*display:table-row;*/
  display: inline-flex;
 border-left: 1px solid #999;
 border-top: 1px solid #999;*/
 }
去掉第二行的注释结束标记



也就是整行的都不要?那就没有滚动条了。
 border-left: 1px solid #999;
 border-top: 1px solid #999;*/
去掉这2行吧

A姑苏醒醒着实

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn