html - Problems with table display:block with image -

i'm trying put text next image on homepage. because want homepage responsive used table this, css:

    #tablehomepage {     display: table; }  #tablehomepage img {     min-width: 280px;     min-height: 190px; }  #tablehomepage body {     vertical-align: top; }   @media (max-width: 920px) {     #tablehomepage td {         display: block;     } 

complete code: https://jsfiddle.net/h3jhgns4/1/ . weirdly problem doesn't occur here...

my image in first cell, text in second cell. there 1 row.

some problems have:

1. when screen gets below 920 'display:block' kicks in, puts text around image. want have text below image on smaller screens.
2. when 'display:block' kicks in, random border appears underneath top border.
3. i cannot image auto-scale nicely fit next text on different screensizes. guess can achieved setting static size cell , putting image css background, cannot set alt-text (seo important me).

try setting display inline-block , text, add clear:booth need full row width, , not around image.