html - 如何使用 CSS 使我的表格右侧边框短于单元格高度？

Question

在站点http://www.domestika.org/foros中，表格的右侧边框比每行中每个单元格的单元格高度短。尝试使用检查元素，但无法弄清楚。div里面是div吗？

Answer 1

在 DIV（或 TD）中使用 DIV 是正确的方法。根据您想要的视觉效果定位和调整内部 DIV 的大小。

Answer 2

它在带有填充的 td 内使用 div。

您可以使用 Firefox 上的 Firebug、IE 或 Chrome (F12) 中的 Webdeveloper 工具来查看它。

会是这样的：

CSS：

.pad{
    padding: 10px;
}
.border {
    border-left: solid 1px #999;
}

HTML：

<td class="pad">
    <div>content here</div>
</td>
<td class="pad">
    <div class="border">content here</div>
</td>

Answer 3

知道了：

.tdone {
  width: 130px;
  border-bottom: 0.1em dashed #CDCDCD;
  text-align: center;
}

.tdtwo {
  width: 130px;
  border-right: none;
  overflow: hidden;
  border-bottom: 0.1em dashed #CDCDCD;
  text-align: center;
}

.cellpadding {
  padding: 20px;
  border-right: 0.1em solid #CDCDCD;
}

<table cellpadding="15" align="center">
  <tr>
    <td class="tdone">
      <div class="cellpadding">
        registry.type
      </div>
    </td>
    <td class="tdone">
      <div class="cellpadding">
        registry.quantity
      </div>
    </td>
    <td class="tdone">
      <div class="cellpadding">
        registry.color
      </div>
    </td>
    <td class="tdtwo">
      registry.brand
    </td>
  </tr>
</table>