Question

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-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>

Answer 1

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;