html - CSSを使用して、テーブルの右側の境界線をセルの高さよりも短くするにはどうすればよいですか？

Question

サイトhttp://www.domestika.org/forosでは、テーブルの右側の境界線は、各行の各セルのセルの高さよりも短くなっています。inspect要素を使用しようとしましたが、理解できません。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>