Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

ご挨拶

おはよううございます。
本日担当させていただくことになりました、株式会社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が適用されないといった場合があります。
その時はそれ用に手を加える必要がありますが、原理は同じで再現可能です。

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away