По какой-то причине я получаю отступ в 1 пиксель или границу на столе.Я не могу понять, как избавиться от этого.Я попытался добавить display:block;margin:0;padding:0;
к изображениям, но это не решает проблему.Я также пробовал <table border="0">
и border:none;
в CSS.Что касается жизни, я не могу понять это.
Причина, по которой это проблема, заключается в том, что я пытаюсь выровнять изображения с краями по обе стороны от tr, чтобы придать им округлостьграницы, так как CSS3 border-radius не работает на TR.Я добавил table, table * {border:1px solid red;}
в CSS, и с этой точки зрения это выглядит как проблема с отступами или полями.
Проблема в этом изображении:
on the left and right sides, you can see there's some kind of padding or something between the images and the edge of the table. The red borders are there just to see this.
Here's my 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;
}
And the HTML:
Некоторое содержимое