CSS属性删除间距

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/

Answer 2

You can either float them , or align them vertically with inline-block display

td img {
    float:left;    
}

Float

td img {
    display: inline-block;
    vertical-align:top;    
}

Vertical Align

Answer 3

Used give to font-size:0; in your td and remove display:block; in your img tag

as like this

      td {
        display: inline-table;
        border-spacing: 0px;
font-size:0; //add this line
        border-collapse: collapse;
        }td img {
    display:block; // remove this line
        }

Upated Demo

Answer 4

Take a look here: JSFiddle

I used a combination of float:left clear:left :nth-child() and display:table-cell

If you can modify the HTML for this you can ad an class attribute to the td element like so: <td class="image-grid">

and then update the CSS to select specifically for that:

td.image-grid img {
    float:left;
    display: block;
}

td.image-grid img:nth-child(3){
    clear:left;
}

​

Answer 5

Float the images.

td img {
    float:left;
}

Here is the Fiddle

Answer 6

you can use float . but please don't give for all td . instead of that you can give particular class name .

.testclass td img {
float:left;    
}

It will apply to the testclass td only. it will not affect other table td values.