使用定义列表的伪表

Question

有没有办法让单个定义列表（<dl>）看起来像桌子？

以下是代码：

＆＃13;

＆＃13;

dt {
  background-color: rgb(250, 250, 250);
}

dd {
  margin-left: 0;
}

dt,
dd {
  border: 1px solid rgb(230, 230, 230);
  box-sizing: border-box;
  padding: 12px;
  width: 33%;
}

＆＃13;

<dl>
  <dt>Term 1</dt>
  <dd>Definition of term 1</dd>

  <dt>Term 2</dt>
  <dd>Definition of term 2</dd>

  <dt>Term 3</dt>
  <dd>Definition of term 3</dd>
</dl>

＆＃13;

＆＃13;

＆＃13;

以下是我试图创建的表格示例。实际上，我已经可以做到，但它要求我使用3个<dl>元素而不是单个元素。

Answer 1

如果上述结构/设计是静态/固定的，那么css column将对您有所帮助。

dl {
  column-count: 3;
  column-gap: 0;
}

dt {
  background-color: rgb(250, 250, 250);
}

dd {
  margin-left: 0;
}

dt,
dd {
  border: 1px solid rgb(230, 230, 230);
  box-sizing: border-box;
  padding: 12px;
}

<dl>
  <dt>Term 1</dt>
  <dd>Definition of term 1</dd>

  <dt>Term 2</dt>
  <dd>Definition of term 2</dd>

  <dt>Term 3</dt>
  <dd>Definition of term 3</dd>
</dl>