Reputation: 10669
I want to present a basic text list with explanation. See screenshot (this was done in a text editor).
I was thinking of a html table, but I don't succeed in simulating this easily. Any suggestions?
I would like to use a table instead of a div, since this allows me to easily add new lines. Most html-editors allow to just use TAB to add a new line.
The problem is the css: How can I get the lines close to each other?
DIV example (thanks Sylent):
.divClass {
display: table-row;
}
.divClass div {
padding: 3px;
display: table-cell;
}
<div class="divClass">
<div>description</div>
<div>Descriptive test with info.</div>
</div>
<div class="divClass">
<div>description</div>
<div>Descriptive test with info.</div>
</div>
* Table example:*
.divClass {
display: table-row;
}
.divClass div {
padding: 3px;
display: table-cell;
}
<table class="divClass">
<tr>
<td>definition</td>
<td>Descriptive test with info.</td>
</tr>
<tr class="divClass">
<td>definition</td>
<td>Descriptive test with info.</td>
</tr>
</table>
Upvotes: 0
Views: 170
Reputation: 514
Made this with <div>
and some CSS.
html:
<div class="divClass">
<div>some text</div>
<div>some text</div>
</div>
<div class="divClass">
<div>some text</div>
<div>some text</div>
</div>
css:
.divClass {
display: table-row;
}
.divClass div {
padding: 3px;
display: table-cell;
}
Hope this displays it well enough for you :D .
Upvotes: 1