Border and spacing between TDs. Need help

I have a table with 2 columns. 1 for text and another for image. I have repeated border style like border-left, border-right etc.

Is there any way like border:0 0 1 0; ? so that I don't repeated the whole style applied on below cell. Any better way.

I have little spacing between TDs. I don't want it. Anyone tell me how to remove spacing please.

Anyone got any better styling skills to achive same thing more cleaner.

http://jsfiddle.net/pauldwaite/kYAMX/

CSS

.ver-mainbox-table{width:898px;  }
.ver-mainbox-tr{height:122px; background-color:#ffffff; }
.ver-mainbox-txt{vertical-align:middle; padding:0 0 0 10px; width:500px; border-top:1px solid #c3c3c3; border-left:1px solid #c3c3c3; border-bottom:1px solid #c3c3c3; }
.ver-mainbox-img{vertical-align:middle; padding:2px 2px 2px 0; width:186px; text-align:right; border-top:1px solid #c3c3c3; border-right:1px solid #c3c3c3; border-bottom:1px solid #c3c3c3;}
.spacer-m{height: 15px;}

HTML

<table class="ver-mainbox-table">
            <tr class="ver-mainbox-tr">
                <td class="ver-mainbox-txt">
                    sdf sdf sdf sfd sdf
                </td>               
                <td class="ver-mainbox-img">
                    <img src="v1.gif" alt="" title="" />
                </td>
            </tr>
            <tr><td class="spacer-开发者_JS百科m" colspan="2"></td></tr>
            <tr class="ver-mainbox-tr">
                <td class="ver-mainbox-txt">
                    <h2>Immunizations</h2>
                </td>               
                <td class="ver-mainbox-img">
                    <img src="v1.gif" alt="" title="" />
                </td>
            </tr>
        </table>

---

You can combine most of your values into a single statment:

border:1px solid #c3c3c3

You can then specify the border widths for those you want to have a value of 0.

border-width:0 0 1px 0;

To get rid of the spacing between the td's you can use the border-collapse property with a value of collapse;

border-collapse:collapse;

---

The CSS style you're looking for to remove the spacing between table cells is border-collapse. You apply it to the <table> element like so:

table {
  border-collapse:collapse;
}

(note: replace table with a better selector if you don't want it to apply to all tables)

But unless I'm misunderstanding your context, I don't think you really need to use a table for this sort of thing. In fact, if it isn't tabular data, it's preferable not to use a table.

You could do something like this instead:

<div>
   <span>sdf sdf sdf sfd sdf</span><img src="v1.gif" alt="" title="" />
</div>
<div>
   <span>Immunizations</span><img src="v1.gif" alt="" title="" />
</div>

Then all you need to do is style the <spans> to have a fixed width, and you should have pretty much the same effect:

span {
  display:inline-block;
  width:500px;
}

Hope that helps.

---

The remaining space is probably margin. To remove all spacing:

margin: 0;
padding: 0;
border: 0;

Then you can adjust from there to get the layout you want.

To clean up your borders:

border-style: solid;
border-color: #c3c3c3;
border-width: 1px 0 1px 1px;  /* top right bottom left */

It's the same number of properties, but looks a little cleaner IMO.