34848


[![作りたい表](https://i.stack.imgur.com/NPTKA.jpg)](https://i.stack.imgur.com/NPTKA.jpg)  
添付画像のデザインの表（table）を作りたいです。  
よく見て頂かないと分かりづらいかもしれませんが、  
thが白い余白に囲まれていて（点線で区切られていますが背景色が繋がっている状態）、  
thの点線が左端からではなく途中から始まっているデザインです。  
色々調べてみたのですが、cssとhtmlをどう書けば実現できるのか分かりません。  
どなたか分かる方教えて頂けないでしょうか？


CC BY-SA 3.0
2017-05-18T11:22:32.137
34809
2017-05-19T15:37:23.320
2017-05-19T13:57:04.530
23137
23137
question
html css
添付画像のようなデザインの表(table)を作成したい。


ソースを見ていないので確証はありませんが、`border-collapse`の値が原因ではないかと思います  
<http://www.htmq.com/style/border-collapse.shtml>

`table { border-collapse: collapse; }`  
を指定して、改善されるか確認してみてください


CC BY-SA 3.0
2017-05-19T06:45:19.163
34827
2017-05-19T06:45:19.163
9796
34809
answer


テーブルの列全体を一つのボックスのように扱うのは無理のようなので、項目名側の背景色なんかは`table`要素とは別に作って、重ね合わせないと仕方ないのではないでしょうか。

[code]

    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;
    }
[/code]

[code]

    <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>
[/code]

実際に使おうと思うとあれこれ修正が必要かもしれません。「項目名」側のwidthは完全に固定という想定です。(表の高さの変化には追従するはず。)

個人的には、ここまでしてHTML的に難しいデザインにしなくてもと思ってしまいますが。


CC BY-SA 3.0
2017-05-19T15:37:23.320
34848
2017-05-19T15:37:23.320
13972
34809
answer