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

【问题标题】：How can I make my Table right hand border shorter than the cell height with CSS?如何使用 CSS 使我的表格右侧边框短于单元格高度？
【发布时间】：2012-06-19 21:08:16
【问题描述】：

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

【问题讨论】：

这很神奇。（这是 td 中的一个 div，你需要锻炼你的元素检查器技能）
其实是左边框不右

标签： html css ruby-on-rails

【解决方案1】：

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

【讨论】：

试过还是没有雪茄。一个例子可能 - 我如何在 td 中放入另一个 DIV？谢谢

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：