CSS Tree

CSS

ul.tree, ul.tree ul {
    list-style-type: none;
    margin:0;
    padding:0;
}

ul.tree ul {
    margin-left:10px; 
    position:relative;
}

ul.tree ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-left:1px solid #ccc;
}

ul.tree li  {
    margin:0;
    padding:3px 12px;
    text-decoration: none;
    font-size:13px;
    line-height:20px;
    font-weight:normal;
    position:relative;
}

ul.tree li a { 
    text-decoration: none;
    font-size:14px;
    line-height:20px;
    font-weight:bold;
    position:relative;
}

ul.tree ul li:before {
    content:"";
    display:block;
    width:8px;
    height:0;
    border-top:1px solid #ccc;
    position:absolute;
    top:10px;
    left: 0;
}

ul.tree ul li:last-child:before {
    border-left:1px solid #FFF; /* ??????????????? */
    height: auto;
    top: 10px; 
    bottom: 0;
}

HTML

<ul class="tree">
    <li>AAA/li>
    <li>BBB
        <ul class="tree">
            <li>BB1</li>
            <li>BB2
               <ul class="tree">
                     <li>BB21</li>
                     <li>BB22</li>
               </ul>
            </li>
            <li>BB3</li>	
        </ul>
    </li>	
</ul>

border-radiusなテーブル

注意点がいくつかあります。

  • tableのborderはtableの外枠のみの指定です。
  • tableとtdのborderを重ねると太い線で表示されます。
  • 上記は、画面でうまくいっても印刷では太くなる場合があります。
  • border-collapse:collapseでうまくいかない場合があります(詳しい条件が詰め切れず)
.radius-table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    border: darkblue solid thin;
    overflow: hidden;
}
.radius-table tr td:not(:first-child){
    border-left: darkblue solid thin;
}
.radius-table tr:not(:first-child) td {
    border-top: darkblue solid thin;
}