Question

我有一个包含2列的表格。 1表示文本，另一表示图像。我有重复的边框样式，如border-left，border-right等。

有没有像border这样的方法：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>

Answer 1

您可以将大部分值合并为一个语句：

border:1px solid #c3c3c3

然后，您可以为想要值为0的那些人指定边框宽度。

border-width:0 0 1px 0;

要摆脱td之间的间距，您可以使用值为border-collapse的{{1}}属性;

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看起来更清洁。

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

3 个答案: