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

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

WBOY
WBOY原創
2016-06-24 11:38:421832瀏覽

想在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