・3カラム表示の例
<dl class="dl_3column_table">
  <dt>項目1</dt><dd>内容1</dd>
  <dt>項目2-1<br>項目2-2</dt><dd>内容2</dd>
  <dt>項目3</dt><dd>内容3</dd>
  <dt>項目4</dt><dd>内容4-1<br>内容4-2<br>内容4-3<br>内容4-4</dd>
  <dt>項目5</dt><dd>内容5</dd>
  <dt>項目6</dt><dd>内容6</dd>
  <dt>項目7</dt><dd>内容7</dd>
  <dt>項目8</dt><dd>内容8</dd>
</dl>
/* ブラウザの初期設定をクリア */
dl,dt,dd {
  margin: 0;
  padding: 0;
}

.dl_3column_table {
  background-color: #FFF;
  border-left: 1px solid #E4E4E4;
  margin: 20px;
  width: 900px;
  display: flex;
  flex-wrap: wrap;
}
.dl_3column_table dt:nth-of-type(-n+3),
.dl_3column_table dd:nth-of-type(-n+3) {
  border-top: 1px solid #E4E4E4;
}
.dl_3column_table dt {
  background-color: #FBFBFB;
  font-weight: bold;
}
.dl_3column_table dt,
.dl_3column_table dd {
  padding: 15px;
  width: calc(100%/6);
  box-sizing: border-box;
  border-right:  1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.