HALFWAY

■ リストを使ったテーブル (もどき)

CSSデザインノート: リストアーカイブを試す。 ※ IE 無視

■ サンプル

&

&

"

"

<

&lt;

>

&gt;

2009-07-02

このサンプルは元ページのまま使わせて頂いています。あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

2009-05-14

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

■ CSS

* html body dl.list dd div{
   display:inline-block;
}

dl.list1 {
   border: 1px solid #999;
   border-top: 0;
   background: #F5F5F5;
}

dl.list1 dt {
   float: left;
   width: 10em;
   border-top: 1px solid #999;
   padding-top: 10px;
   padding-left: 10px;
   padding-bottom: 0;
   padding-right: 0;
}

dl.list1 dd {
   margin: 0;
   margin-left: 10em;
   padding: 10px;
   border-top: 1px solid #999;
   border-left: 1px solid #999;
   background: #FFF;
}

■更新 2009年 07月 02日