Question

First I admit, I know CSS but not a master of that.

I have to show 4 images in a table (td). Image placement is required as follow

A B
C D

where A, B, C & D are 4 images with no spacing between them. Width of TD is 40 px and of each image is 20px.

I find other questions on Stackoverflow and played with table's border-spacing, border-collapse properties to remove space. But now problem is I’m getting my images as

A
B
C
D  //without spacing with display:block in `td img`

or

A B
      //With space, with display:inline-block on `td img`
C D 

Working demo is given on Fiddle

Code (HTML)

<table>
<tbody>
<tr>
    <td valign="top" width="40px">
        <img width="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="a">
        <img width="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="b">
        <img width="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="c">
        <img width="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="d">
    </td>
</tr>
</tbody>
</table>

Code (CSS)

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
td {
    display: inline-table;
    border-spacing: 0px;
    border-collapse: collapse;
}
td img {
    display: block;
}

What CSS properties should I change to make Fiddle as expected.

Answer 1

Add float:left to the td img class

updated demo http://jsfiddle.net/59vGe/6/

New demo http://jsfiddle.net/59vGe/14/