外贸建站之自适应table表格缺陷分享，今天搞的自适应表格确实可以实现自适应的效果，纯CSS代码，如果表格里面有图片的话，缺陷会比较明显，先发一个chinaobd2.com上的案例图。
这里因为前面有图片的两列文字比较少，列宽比较窄，这个就导致原本图片一样大的图片，显示出来的效果差异特别大。
这里再把CSS自适应表格代码发出来，也希望大家可以找到自己的解决办法。
.amp-page-navigation .nav-cont-list ul ul li{padding:0 15px}.amp-page-navigation .nav-cont-list ul ul li li{padding:0 15px}.amp-page-navigation .nav-cont-list ul a{color:#464646;display:block}.amp-page-navigation hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:0 0 10px}.amp-page-navigation amp-accordion>section>h4{border:0;padding:0;text-align:center;line-height:26px;text-indent:0}.amp-page-navigation amp-accordion>section[expanded]>h4{transform:rotate(180deg)}.amp-page-footer{background-color:#f5f5f5;margin-top:20px;padding:10px 15px}.amp-page-footer a{color:#42a3e0;font-weight:bold}.amp-page-footer span{position:relative;top:-3px}.amp-page-footer .fll{white-space:nowrap;width:80%;overflow:hidden;text-overflow:ellipsis}.amp-page-crumbs{margin:10px 0 0;color:#777}.amp-page-crumbs a{color:#ababab}.amp-page-crumbs>i:last-child{display:none}.amp-page-crumbs>a:first-child{position:relative;top:3px;width:0;height:0;border-bottom:6px solid #bdbcbc;border-left:8px solid transparent;border-right:8px solid transparent;display:inline-block}.amp-page-crumbs>a:first-child:after{content:'';height:8px;width:10px;background-color:#c3c3c3;position:absolute;left:-5px;top:7px;border-radius:0 0 2px 2px}.amp-page-pagination{margin-top:20px;text-align:center}.amp-page-pagination a{display:inline-block;height:24px;min-width:24px;border:1px solid #ddd;background-color:#fff;color:#464646;line-height:24px;text-align:center;margin:4px}.amp-page-pagination a.on{background-color:#2c90d0;color:#fff;border-color:#0379c4}.amp-page-pagination a.dotted{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.amp-page-pagination a:first-child,.amp-page-pagination a:last-child{font-family:serif}.amp-page-prodlist *{-webkit-box-sizing:border-box;box-sizing:border-box}.amp-page-prodlist h1,.amp-page-articlelist h1,.amp-page-detailName{font-size:22px;line-height:1.45em;font-weight:bold;color:#1e1f1f;margin:15px 0;font-family: Verdana, Geneva, sans-serif;}.amp-page-prodlist ul{margin:0 -10px}.amp-page-prodlist li{list-style-type:none;float:left;width:50%;margin-bottom:15px;padding-right:10px;padding-left:10px}.amp-page-prodlist li .prodlist-pic-wrap{height:180px;overflow:hidden;margin-bottom:10px}.amp-page-prodlist li .prodlist-pic-wrap a{position:relative;top:50%;display:block;transform:translateY(-50%)}.amp-page-prodlist li:nth-child(2n+1){clear:both}.prodlist-btn{margin-top:10px;display:block;background-color:#42a3e0;padding:.5em 0;border-radius:4px;color:#fff;text-align:center;text-transform:uppercase;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2)}.amp-page-prodlist li .prodlist-prod-name{line-height:1.5em;color:#424242;height:3em;overflow:hidden}.amp-page-articlelist ul{margin:0 -15px;-webkit-box-sizing:border-box;box-sizing:border-box}.amp-page-articlelist li{margin-bottom:20px;border-bottom:1px solid #eaeaea;padding:0 15px 10px}.amp-page-articlelist .articlelist-pic-wrap{width:100px;margin-right:-100px;position:relative;z-index:3}.amp-page-articlelist .articlelist-cont-wrap{position:relative;z-index:2;padding-left:115px;width:100%;box-sizing:border-box}.articlelist-cont-wrap .articlelist-link{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#222;font-size:18px;font-family: Verdana, Geneva, sans-serif;}.articlelist-cont-wrap .articlelist-description{color:#6a6a6a;line-height:1.5em;max-height:3em;overflow:hidden;margin:5px 0}.articlelist-cont-wrap .articlelist-info,.articlelist-cont-wrap .articlelist-info a{color:#ababab}.articlelist-cont-wrap .articlelist-info a .fa{color:#0379c4}.articlelist-cont-wrap .articlelist-info span{max-width:50%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.amp-page-detailSlides{margin-top:5px}.amp-page-detailSlides .article-image-style{position:relative}.amp-page-detailSlides .article-image-style>p{line-height:2em;position:absolute;bottom:0;left:0;right:0;padding:0 8px;background-color:rgba(0,0,0,0.45)}h2.amp-page-related{font-size:20px;font-weight:bold;color:#333;margin:30px 0 0;font-family: Verdana, Geneva, sans-serif;;text-transform:capitalize}.amp-page-detailSlides .article-image-style>p a{color:#fff}.amp-page-prodDescription amp-accordion section{margin-bottom:10px}.amp-form-wrapper{margin:20px -15px;-webkit-box-sizing:border-box;box-sizing:border-box}.amp-form-horizontal{-webkit-box-sizing:border-box;box-sizing:border-box;padding:20px;background-color:#f8f8f8}.amp-form-horizontal .control-group{margin-bottom:10px}.amp-form-horizontal>p{font-size:18px;margin-bottom:15px;color:#0379c4;font-weight:bold}.amp-form-horizontal .control-group label{color:#333}.amp-form-horizontal .control-group label .required{color:#c00;margin-right:3px}.amp-form-horizontal .controls input,.amp-form-horizontal .controls textarea{text-indent:5px;display:block;width:100%;border:1px solid #c2c2c2;line-height:30px;height:30px;border-radius:4px}.amp-form-horizontal .controls textarea{padding:0;height:6em}.amp-form-horizontal .controls button{margin-top:10px;width:100%;line-height:34px;border-radius:4px;border:1px solid #42a3e0;font-size:14px;text-transform:uppercase;background-color:#42a3e0;color:#fff}.amp-page-detailshare{margin:10px 0;text-align:left}.amp-page-detailshare amp-social-share{background-size:26px 26px}.referenceBd{max-width:100%;overflow-x:auto;padding-bottom:10px}.referenceBd table td,.referenceBd table th{border:1px solid #e9e9e9;padding:3px 8px}.amp-page-prodDescription amp-img,.amp-page-prodDescription amp-iframe,.amp-page-prodDescription p,.amp-page-prodDescription div,.amp-page-articledetail amp-img,.amp-page-articledetail amp-iframe,.amp-page-articledetail p,.amp-page-articledetail div{margin:10px 0;line-height:2em}.prod-detail-btn-wrap{margin-top:10px}.prod-detail-btn-wrap a:last-child{margin-bottom:20px}.amp-page-prodDescription amp-accordion h4{border-color:#eee;text-indent:10px;line-height:2em;font-size:16px;font-weight:bold;border-width:0 0 1px;background-color:#fff}.amp-page-prodDescription amp-accordion h4:before{content:">";margin-right:6px;font-family:initial;position:absolute;right:10px;top:0}.amp-page-prodDescription amp-accordion section[expanded] h4:before{content:"﹀";margin-right:6px;font-size:15px;font-family: Verdana, Geneva, sans-serif;top:2px}.amp-page-prodDescription amp-accordion .accordion-cont{padding:10px 5px}.amp-page-imgwrap{text-align:center;margin:50px 0}.amp-page-linkswrap{padding:0 0 40px}.amp-page-linkswrap a{color:#666;font-family: Verdana, Geneva, sans-serif;}.amp-page-articlecont a{color:#363636;} table.bftable{margin-top:15px;border-collapse:collapse;border:1px solid #ddd;width:100%}table.bftable th{vertical-align:baseline;padding:5px 15px 5px 6px;background-color:#096;border:1px solid #ddd;text-align:left;color:#fff}table.bftable td{vertical-align:text-top;padding:6px 15px 6px 6px;border:1px solid #ddd}table.bftable tr:nth-child(odd){background-color:#F5F5F5}table.bftable tr:nth-child(even){background-color:#fff}table.bftable pre{width:auto;margin:0;padding:0;border:0;background-color:transparent}table.bftable p{margin:0 0 2px 0}table.bftable li,table.bftable ul{list-style-type:none;margin:0;padding:0}table.bftable td em{color:#00f;font-weight:400}table.bftable .table_value{color:#0F93D2}table.bftable ul.listintable{margin:20px;padding:0}table.bftable ul.listintable li{list-style-type:disc}@media(min-width:300px){.amp-page-prodlist li .prodlist-pic-wrap{height:136px}}@media(min-width:374px){.amp-page-prodlist li .prodlist-pic-wrap{height:160px}}@media(min-width:410px){.amp-page-prodlist li .prodlist-pic-wrap{height:180px}}@media(min-width:480px){.amp-page-prodlist li .prodlist-pic-wrap{height:220px}} .table-responsive{min-height:.01%;overflow-x:auto} .table{width:100%;border-collapse:collapse;border-spacing:0} .table td,.table th{background-color:#F3F5EF;border:1px solid #bbb;color:#333;font-family:sans-serif;font-size:100%;padding:10px;vertical-align:top} .table tr:nth-child(even) td{background-color:#F0F0E5} .table th{background-color:#EAE2CF;color:#333;font-size:110%} .table tr.even:hover td,.table tr:hover td{color:#222;background-color:#FFFBEF} .tg-bf{font-weight:700} .tg-it{font-style:italic} .tg-left{text-align:left} .tg-right{text-align:right} .tg-center{text-align:center} @media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar} .table-responsive>.table{margin-bottom:0} .table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap} }
具体案例演示：https://www.chinaobd2.com/amp/xtuner-cvd-16-v47-hd-diagnostic-adapter-for-android-5101.html