出于某种原因,我在表格上得到了 1px 的填充或边框。我不知道如何摆脱它。我试过添加 display:block;margin:0;padding:0;
到图像,但这并不能解决问题。我也试过 <table border="0">
和 border:none;
在 CSS 中。对于我的生活,我无法弄清楚。
这是一个问题的原因是因为我试图让图像与 tr 两边的边缘对齐,给它圆 Angular 的边框,因为 CSS3 border-radius 在 TR 上不起作用。我添加了 table, table * {border:1px solid red;}
到 CSS,从那里,它看起来绝对像是填充或边距问题。
问题出在这张图片中:
在左侧和右侧,您可以看到图像和表格边缘之间有某种填充或其他东西。红色边框只是为了看到这一点。
这是我的 CSS:
table a {
color: #f7941E;
font-family: Arial;
font-size: 16px;
font-weight: bold;
/* css3 */
transition: color .25s;
-khtml-transition: color .25s;
-moz-transition: color .25s;
-o-transition: color .25s;
-webkit-transition: color .25s;
}
table a:hover {
color: #f8ae57;
}
table {
width: 610px;
}
table tr {
height: 33px;
padding: 0;
margin: 0;
vertical-align: middle;
}
table td {
border-collapse: collapse;
}
table tr.head {
color: #58585a;
font-family: Rockwell, serif;
font-size: 18px;
font-weight: bold;
text-transform: lowercase;
}
table tr.even {
background: #EEE;
height: 33px;
}
table tr td img {
padding: 0 15px 0 13px;
vertical-align: middle;
}
table tr td a img {
opacity: .6;
/* css3 */
transition: opacity .25s;
-khtml-transition: opacity .25s;
-moz-transition: opacity .25s;
-o-transition: opacity .25s;
-webkit-transition: opacity .25s;
}
table tr td a img:hover {
opacity: 1;
}
和 HTML:
<table border="0">
<tr>
<td><img src="images/tr-left.png" style="display:block;margin:0;padding:0;">
<td><img src="images/some-icon.png" /> <a href="#">Some Content</a></td>
<td><img src="images/tr-right.png" style="display:block;margin:0;padding:0;">
</td>
</table>
最佳答案
尝试:<table border="0" cellpadding="0" cellspacing="0">
关于html - 表格获得 1px 的不需要的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6653984/