Граница и расстояние между ТД. Нужна помощь

Question

У меня есть таблица с 2 столбцами. 1 для текста и другой для изображения. Я повторил стиль границы, такой как рамка слева, граница справа и т. Д.

Есть ли способ, похожий на бордюр: 0 0 1 0; ? чтобы я не повторял весь стиль, примененный к ячейке ниже. Любой лучший способ.

У меня небольшой интервал между ТД. Я не хочу этого Кто-нибудь, скажите мне, как удалить расстояние, пожалуйста.

Любой обладал лучшими навыками стайлинга, чтобы добиться того же самого, более чистого.

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

Вы можете объединить большую часть своих значений в один норматив:

border:1px solid #c3c3c3

Затем вы можете указать ширину границы для тех, для которых вы хотите иметь значение 0.

border-width:0 0 1px 0;

Чтобы избавиться от расстояния между td, вы можете использовать свойство border-collapse со значением collapse;

border-collapse:collapse;

Answer 2

Стиль CSS, который вы ищете, чтобы удалить интервал между ячейками таблицы, равен border-collapse. Вы применяете его к элементу <table> следующим образом:

table {
  border-collapse:collapse;
}

(примечание: замените table на лучший селектор, если вы не хотите, чтобы он применялся ко всем таблицам)

Но если я не неправильно понимаю ваш контекст, я не думаю, что вам действительно нужно использовать таблицу для такого рода вещей. На самом деле, если это не табличные данные, желательно не использовать таблицу.

Вместо этого вы можете сделать что-то вроде этого:

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

Тогда все, что вам нужно сделать, это стиль <spans>, чтобы иметь фиксированную ширину, и вы должны иметь почти такой же эффект:

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

Надеюсь, это поможет.

Answer 3

Остальное пространство, вероятно, margin. Чтобы удалить все интервал:

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

Затем вы можете отрегулировать, чтобы получить нужный макет.

Чтобы очистить ваши границы:

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

Это то же количество свойств, но выглядит немного чище IMO.