html DLを使った表组み（暂定版·レスポンシブ未対応）

Posted 2021-05-11

//ie6対応

//css
dl{
  width:600px;
  overflow:hidden; /*floatしたので高さ確保*/
  border:1px solid #ccc;
  border-top:none; /*dt,dd設定とかぶる*/
  background:#ddd;
}
dt{
  width:160px;
  float:left;
  padding:10px;
  border-top:1px solid #ccc;
}
dd{
  margin-left:180px; /*dtの横幅にあわせて(padding含)*/
  padding:10px;
  border-left:1px solid #ccc; /*長くなる要素にあわせて*/
  border-top:1px solid #ccc;
  background:#fff;
}
dd:after{
  clear:both; /*1段ずつfloat解除する設定*/
}

//html
<dl>
  <dt>項目１</dt>
  <dd>テステステステステステステステステステステステステステステステステステステステステステステステス</dd>
  <dt>項目２</dt>
  <dd>テステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステステス</dd>
</dl>