WEB制作(html・css(スタイルシート))に関する各種メモ書き

dt,ddタグとCSSによるテーブル表現

  <dl class="my_table01">
    <dt>項目1</dt>
    <dd>テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列</dd>
    <dt>項目2</dt>
    <dd>テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列</dd>
  </dl>
  <style>
  .my_table01{
    overflow: hidden;
    box-sizing: border-box;
    width: 600px;
    border: 1px solid #333;
    border-top: 0;
    background: #ccc;
  }
  .my_table01 dt, .my_table01 dd{
    box-sizing: border-box;
    padding: 5px;
  }
  .my_table01 dt{
    float: left;
    width: 100px;
    border-top: 1px solid #333;
    background: #ccc;
  }
  .my_table01 dd{
    width: 500px;
    margin-left: 100px;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    background: #fff;
  }
  </style>

実際の見え方

項目1
テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列
項目2
テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列

ただし、項目名のほうが長い場合は崩れます。


No.1037
05/31 15:43

edit