TD之间的边界和间距。需要帮助

我有一个2列的表。 1用于文本，另一用于图像。我有重复的边框样式，如边框左边，边框右边等。TD之间的边界和间距。需要帮助

有没有像边框的方法：0 0 1 0; ？这样我就不会重复在下面的单元格上应用的整个样式。任何更好的方法。

我在TD之间有很小的间距。我不想要它。任何人都可以告诉我如何去除间距。

任何人都有更好的造型技巧，以达到同样的事情更清洁。

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>

来源

2011-06-23 Pirzada

您可以将大部分的值到一个单一的statment：

border:1px solid #c3c3c3

然后，您可以指定那些你想拥有的0

border-width:0 0 1px 0;

值边框宽度要摆脱td的之间的距离，你可以使用border-collapse属性与价值collapse;

border-collapse:collapse;

来源

2011-06-23 14:29:05

你的答案是完美的。 – Pirzada

其余的空间大概是margin。要删除所有间距：

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

然后你就可以从那里调整，得到你想要的布局。

要清理您的边界：

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

这是相同数量的属性，但IMO看起来干净了一点。

来源

2011-06-23 14:30:53 Adrian

我认为TD之间的间距问题更可能是边界崩溃而不是边缘。 –

“剩余的空间可能是'margin'” - 不是表格单元格中的不是。 –

您要删除表格单元格间距的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; 
}

希望有帮助。

来源

2011-06-23 14:40:21 Spudley

我无法使用span或DIV。这在CMS中使用，在编辑文本等时很难与DIV一起工作。这就像表格数据，因为它将使用许多由文本和图像组成的行。 – Pirzada

TD之间的边界和间距。需要帮助

回答

相关问题