Home >Web Front-end >HTML Tutorial >Dear heroes, I can't get rid of the white border of the image on this TD, can you help me? _html/css_WEB-ITnose
Dear heroes, I can't get rid of the white border of the image on this TD, can you help me? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:151298browse
I put the image in td, and I want it to automatically change with the width of the browser. The maximum is the width of the image, and the height also automatically changes. But there is always a gap under the td. . .
html:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>FD100</title> <meta content-type:"text/html" charset="utf-8"> <meta name="keywords" content="FD100" /> <meta name="description" content="FD100" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="description" content=""> <meta name="author" content=""> <!-- CSS <link rel="stylesheet" href="../assets/css/reset.css"> <link rel="stylesheet" href="../assets/css/supersized.css">--> <link rel="stylesheet" href="kx100-m.css"> </head> <body> <div class='page-container'> <table> <tr><td> <img src='kx100shouji_01.png'/></td></tr> <tr><td> <img src='kx100shouji_02.png'/></td></tr> </table> </div> <!-- Javascript <div class="error"><span>+</span></div>--> <!-- <script src="../assets/js/jquery-1.8.2.min.js"></script> <script src="../assets/js/supersized.3.2.7.min.js"></script>--> <!-- <script src="../assets/js/supersized-couponinput.js"></script> <script src="../assets/js/scripts.js"></script>--></body></html>
CSS:
body { background: #ffffff;/*#f8f8f8;*/ font-family: 'PT Sans', Helvetica, Arial, sans-serif; text-align: center; color: #fff;}.page-container { margin: 0px auto 0 auto;}table { width: 100%; margin:0 auto; background: #2d2d2d; /* browsers that don't support rgba */ background: rgba(45,45,45,.15); font-family: 'PT Sans', Helvetica, Arial, sans-serif; font-size: 20px; border: none; border-collapse: collapse; position:absolute; /*border-spacing:0;*/ text-shadow: 0 1px 2px rgba(0,0,0,.3);}td{ /* max-width:100%; Mozilla才支持一个max-width 的CSS语法 */ background: #ffffff; /*border: none; solid #000 1px;*/ vertical-align:center; text-align:center; color: #000; padding:0; margin-bottom:0; /* 加边框看效果 */ border-width: 1px; border-style: solid; border-color: #666666;}/* 图片自动缩放设备屏幕宽度 */img{ max-width:100%;} Effect:
Reply to the discussion (solution)
Delete the extra spaces in the tr td table
Why don’t you put a picture in one line
tr td{margin:0;padding:0;border:0;} Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：If you have used ueditor, please help me_html/css_WEB-ITnoseNext article：If you have used ueditor, please help me_html/css_WEB-ITnose