CODEWITHSUNDEEP
htmlcss
user90726
user90726

Reputation: 975

Pseudo-table using definition list

Is there way to make single definition list (<dl>) look like table?

Here is the code:

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%;
}
<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>

And below it example of table, which I'm trying to create. Actually, I already could do it, but it requiring me to use 3 <dl> elements instead of single one.

enter image description here

Upvotes: 0

Views: 77

Answers (1)

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

If above structure/design is static/fixed then css column will help you.

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>

Upvotes: 1

Related Questions