開発メモ

開発用のメモです。

CSS Table の表示レイアウトでセルの間のスペースを作らない

table {
    border-collapse: separate;
    border-spacing: 0px;
}

table tr> * {
    border-bottom: 1px dotted black;
    border-right: 1px dotted black;
}

table tr:first-child > * {
    border-top: 1px dotted black;
}

table tr > *:first-child {
    border-left: 1px dotted black;
}
  • 全てのTD/TH タグは 下辺と右辺にボーダーをもつ
  • 全ての列の1番目にある TDもしくはTHは 左辺にボーダーをもつ
  • 1列目の全てのTD/TH タグは上辺にボーダーを持つ
  • ボーダー間のスペースは 0px
Twitter: @asahina_alice