Цвет фона стола дает иллюзию цветной рамки

Question

Я пытаюсь избавиться от синей границы вокруг моих табличных ячеек. Цвет такой же, как цвет фона ячеек таблицы; Я хочу, чтобы изображения занимали всю ячейку, но не могут найти способ избавиться от этих линий, которые выглядят как границы. Идея состоит в том, чтобы сделать фоновый проглядывание, нависая над ячейкой. Я ссылаюсь на всю таблицу в этом jsfiddle, но здесь приведен фрагмент кода ниже.

CSS

.samples td{ 
    text-align: center; 
    width: 30%; 
    height:300px; 
    position:relative; 
    table-layout: fixed; 
    background-color: rgb(0,300,300); 
    border: 1px solid black; 
    box-shadow: 0 0 0 2px #fff; 

Answer 1

Добавить padding: 0 в td и display: block; к img как этот

Updated fiddle

.samples td { 
    text-align: center; 
    width: 30%; 
    height:300px; 
    position:relative; 
    table-layout: fixed; 
    background-color: rgb(0,300,300); 
    box-shadow: 0 0 0 2px #fff; 
    padding: 0; 
} 
.samples td img{ 
    display: block; 
    width: 100%; 
    height:400px; 
    z-index: 50; 
} 

Образец сниппета

.samples { 
 
\t width: 100%; 
 
\t background-color: white; 
 
\t z-index:50; 
 
} 
 
.samples table{ 
 
\t position: relative; 
 
\t width: 100%; 
 
} 
 
.samples td { 
 
\t text-align: center; 
 
\t width: 30%; 
 
\t height:300px; 
 
\t position:relative; 
 
\t table-layout: fixed; 
 
\t background-color: rgb(0,300,300); 
 
\t box-shadow: 0 0 0 2px #fff; 
 
    padding: 0; 
 
} 
 
.samples td img{ 
 
    display: block; 
 
\t width: 100%; 
 
\t height:400px; 
 
\t z-index: 50; 
 
} 
 
.samples td:hover img{ 
 
\t opacity: .5; 
 

 
} 
 
.samples p{ 
 
\t margin: 0; 
 
\t position:absolute; 
 
\t left: 0; 
 
\t top: 50%; 
 
\t right:0; 
 
\t color: #fff; 
 
\t font-size: 20px; 
 
\t text-align: center; 
 
\t z-index:10; 
 

 
} 
 
.samples td:hover p{ 
 
\t visibility: visible; 
 
} 
 
.samples td p{ 
 
\t visibility: hidden; 
 
}

<div class="samples"> 
 
    <table> 
 
    <th>Pokemon</th> 
 
    <tr> 
 
     <td> 
 
     <p>Go Mustangs! Unfortunately, there's not much to cheer for...</p> 
 
     <img src = "http://walnuthighschoolfootball.com/wp-content/uploads/2013-Clare_IMG_0257.jpg"> 
 
     </td> 
 
     <td> 
 
     <p>Hiking on Walnut's hilly Schabarum trail is a change from the Evanston pancake metropolis!</p> 
 
     <img src = "http://nobodyhikesinla.files.wordpress.com/2011/04/hiking-2011-4-236.jpg"> 
 
     </td> 
 

 
     <td> 
 
     <p>Orange you hungry for a tangerine? Give me three and I'll give you a show</p> 
 
     <img src = "http://juicyjuicevapor.com/wp-content/uploads/2015/07/tangerines.jpg"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <p>My favorite place to nap</p> 
 
     <img src = "https://upload.wikimedia.org/wikipedia/commons/4/4e/Deering_Library_detail_Northwestern.jpg"> 
 
     </td> 
 
     <td> 
 
     <p>As a NU Quidditch beater/chaser, I enjoy dodging balls and scoring through hoops.</p> 
 
     <img src = "https://pbs.twimg.com/profile_images/513804815088885761/08UB6aL2.jpeg"> 
 
     </td> 
 
     <td> 
 
     <p>Have never played a game as great as Last of Us. The graphics are so realistic, and online multiplayer mode is v fun.</p> 
 
     <img src = "http://media.aintitcool.com/media/uploads/2013/nordling/thelastofus.jpg"> 
 
     </td> 
 
    </tr> 
 

 
    </table> 
 
</div>