テーブルのボーダーを調整

[qrac]

連結の仕方によってはボーダーが2重になったり破損したりしているので調整。

[qrac]

テスト

MUSUBii Table Test

[qrac]

線を重ねる場合の書き方。

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

[qrac]

他のフレームワークを確認。主にSemantic UIを参考にする。

• Tables · Bootstrap
• Table | Semantic UI
• Tables | Foundation for Sites 6 Docs
• Bulma: a modern CSS framework based on Flexbox

[qrac]

Semantic UIも縦の連結でボーダーが消える...。2行目以降は2列目のtdが:first-childになってしまうため。

[qrac]

線を重ねる場合の書き方で統一。線も透過させない。

.table {
  width: 100%;
  background-color: $light;
  border-collapse: collapse;
  border-spacing: 0;
  th,
  td {
    padding: 0.75em 1em;
    vertical-align: top;
  }
  &.is-middle th,
  &.is-middle td {
    vertical-align: middle;
  }
  > thead > tr:last-child > th {
    border-bottom: 2px solid $blue-grey-100;
  }
}

.table.is-line {
  border-top: 1px solid $blue-grey-100;
  border-bottom: 1px solid $blue-grey-100;
  > tbody > tr:not(:first-child) > * {
    border-top: 1px solid $blue-grey-100;
  }
}

.table.is-outline {
  border: 1px solid $blue-grey-100;
}

.table.is-border {
  border: 1px solid $blue-grey-100;
  th,
  td {
    border: 1px solid $blue-grey-100;
  }
}