添付画像のデザインの表(table)を作りたいです。
よく見て頂かないと分かりづらいかもしれませんが、
thが白い余白に囲まれていて(点線で区切られていますが背景色が繋がっている状態)、
thの点線が左端からではなく途中から始まっているデザインです。
色々調べてみたのですが、cssとhtmlをどう書けば実現できるのか分かりません。
どなたか分かる方教えて頂けないでしょうか?
2 件の回答
テーブルの列全体を一つのボックスのように扱うのは無理のようなので、項目名側の背景色なんかはtable
要素とは別に作って、重ね合わせないと仕方ないのではないでしょうか。
div.wrapper {
position: relative;
}
table.content {
width: 100%;
border: lightgray 2px solid;
border-collapse: collapse;
}
table.content th {
border-right: lightgray 2px solid;
}
table.content th, table.content td.text {
border-bottom: lightgray 1px dashed;
}
table.content th {
width: 100px;
text-align: left;
font: 14px sans-serif;
padding-left: 10px;
}
table.content td.text {
text-align: left;
font: 14px sans-serif;
padding-left: 20px;
}
div.heading-overlay {
position: absolute;
top:4px;
left:4px;
bottom:4px;
width: 116px;
background-color: lightcyan;
z-index: -1;
}
table.content td.filler {
width: 10px;
height: 25px;
border: none;
box-sizing: border-box;
}
<div class="wrapper">
<div class="heading-overlay"></div>
<table class="content">
<tbody>
<tr>
<td class="filler"></td>
<th>項目名</th>
<td class="text">文章</td>
<td class="filler"></td>
</tr>
<tr>
<td class="filler"></td>
<th></th>
<td class="text"></td>
<td class="filler"></td>
</tr>
<tr>
<td class="filler"></td>
<th></th>
<td class="text"><br> </td>
<td class="filler"></td>
</tr>
</tbody>
</table>
</div>
実際に使おうと思うとあれこれ修正が必要かもしれません。「項目名」側のwidthは完全に固定という想定です。(表の高さの変化には追従するはず。)
個人的には、ここまでしてHTML的に難しいデザインにしなくてもと思ってしまいますが。
-
ありがとうございます。デザイン通りに表(table)が作れました。そうですよね、デザイン変えてもらうことも検討してみます。すみません。ちなみにですが、このデザインでレスポンシブ対応することは可能ですか?できましたら、そちらのソースも教えて頂けますと幸いです。– Riku.Commented 2017年5月19日 23:04
-
@Riku. さん、一口にレスポンシブ対応といっても、どのような要素をどこまで対応させるのかと言った事柄は様々になります。こちらはコーディング丸投げサイトではありませんので、はっきりしない要件を聞き取り相談しながら仕様化して、あなたの(お客様の?)要望にぴったりのコードを提示する、と言うことまではできかねます。まずは上記のコード(あるいは他の方が別のやり方のコードを提示されたらそちらも含めて)の挙動をしっかり確認していただいた上で、ご自身ではどうしても解決できない部分を明確化して絞り込んだ後に、改めて別質問として投稿してくださるようにお願いします。– OOPerCommented 2017年5月20日 0:47
-
レスポンシブ対応といったのはスマホの時のデザインでした。thとtdを下に落とす場合、thの背景色の回りに余白をつける方法がわかりませんでした。単純に縮小する場合はわかりましたが、落とすか縮小するか決めかねていて、また細かいデザイン(thの点線を途中からにするか、thの背景色の回りに余白をつけるか(上下左右か上左右か))もはっきりしていませんでした。曖昧なコメントをしてしまい申し訳ありませんでした。– Riku.Commented 2017年5月20日 2:11
ソースを見ていないので確証はありませんが、border-collapse
の値が原因ではないかと思います
http://www.htmq.com/style/border-collapse.shtml
table { border-collapse: collapse; }
を指定して、改善されるか確認してみてください