4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

WACULAdvent Calendar 2015

Day 20

デザインをhtml化するとき困った事

Posted at

ご挨拶

おはよううございます。 本日担当させていただくことになりました、株式会社WACULでhtmlを書いている秋山です。 以後、よろしくお願いいたします。

デザインをhtml化するとき困った事

デザインをhtml化する上で時々「これ、どう~すっかな」というものがあります。 そのうちの一つがこれ。

c544261e5b46dc0cac335253d31acacf.png

th,tdの仕切り線の上下が途切れているのがポイントです。
このデザインをもらったとき、思わず確認しました。
「これ、ど~しても再現したい?」
「ど~~~~~しても、したい、です!!!!!」
「そっかー・・・」

隠してしまえばいい

解決策の一つとしては線の上下を背景色で塗りつぶした block要素で塗りつぶしてしまう、です。

html
e1e747d24e2c56905603eddd5c6de5c4.png

css


table.basic th, table.basic td {
  border-bottom: solid 1px #ddd;
  padding: 24px 30px 21px 0;
  line-height: 200%;
  position: relative;
  overflow: visible;
}
table.basic td {
  border-left: solid 1px #ddd;
  padding-left: 30px;
}
table.basic td::before, table.basic td::after {
  content: "";
  background-color: #fff;
  width: 5px;
  height: 20px;
  display: block;
  position: absolute;
  left: -3px;
}
table.basic td::before {
  top: 0;
}
table.basic td::after {
  bottom: 0;
}

といった感じです。

とはいえ、before,abterが使えない、th,tdにpositionが適用されないといった場合があります。
その時はそれ用に手を加える必要がありますが、原理は同じで再現可能です。

「不要な部分は隠してしまえばいいのです。」

4
5
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?